Javascript CSS伪元素混淆

我对如何解决这个问题感到困惑，这个问题的实际结构如下：

<p.lead><div.fa>[font-awsome-icon]</div> Orange Header Text </p>
<p.description> lorem ipsum... </p>

这是不可接受的。我不需要一个“纯”的css解决方案

---

我将通过不同的HTML结构来实现这一点。不需要JS

将图标和标题文本放在同一行会产生固有的问题。当标题文本换行时，它将在行首重新开始，正如您所演示的那样

首先，我将整个内容包装在一个包装器div中，并使用它来创建2px左边框，而不是使用：before元素

然后我将把icon div从p元素中拉出。相反，它将位于包装器div内部。我将绝对地将其定位为与包装器div的左边框重叠

我会使用一个标题（比如h2）而不是一个p作为节标题，但这并不是必须的

h2.lead{
位置：相对位置；
颜色：橙色；
字体大小：24px；
文本阴影：0px 0px灰色；
左边距：8px；
}
.包装纸{
位置：相对位置；
左边框：2倍纯色灰色；
利润率：20px；
填充：20px；
宽度：350px
}
.图标{
位置：绝对位置；
顶部：40px；
左：-25px；
右边距：0.3em；
颜色：灰色；
文本对齐：居中；
边框：2倍纯色灰色；
字体大小：50px；
线高：1；
宽度：44px；
高度：44px；
边界半径：22px；
填充：0px；
背景色：#fff；
}
p、 描述{
位置：相对位置；
边缘底部：2米；
字号：18px；
左边距：8px；
}

✪ 
这里有一些标题文本。
橙色标题文本
lorem ipsum

（代表OP发布答案）

解决方案（在接受答案的帮助下）

---

看起来您的元素不够宽，无法将文本保留在一行中。如何在答案中编程该代码段？？（谢谢你！）@TideLake-当你写问题或答案时，在顶部有一个带有格式按钮的工具栏。其中一个看起来像这样

{}

。该按钮打开一个类似于JSFIDLE的代码段创建者。不客气！很高兴能帮上忙。哎哟！对不起，这确实是一个按钮，看起来像一个页面，里面有一个

。

  p.lead {
    position: relative;
    color: $erisaOrange;
    text-shadow: 0px 0px $darkCanvas;
    letter-spacing: 105%;
    margin-left: 8px;
    .fa {
      position: relative;
      top: 2px;
      left: -10px;
      margin-right: 0.3em;
      color: $darkerGray;
      text-shadow: 2px 2px $darkGray;
      text-align: center;
      background-color: transparent;
      content: '';
      border: 2px solid $darkGray;
      font-size: 114%;
      line-height: 44px;
      width: 44px;
      height: 44px;
      border-radius: 22px;
    }
  }

  p.description {
    position: relative;
    padding-left: 1em;
    padding-right: 1em;
    margin-bottom: 2em;
    margin-left: 19px;
    font-size: 18px;
    border-left: 2px solid $darkGray;
    &:before {
      position: absolute;
      top: -1em;
      left: -2px;
      content: '';
      border-left: 2px solid $darkGray;
      height: 1em;
    }
    &:after {
      position: absolute;
      bottom: -2.2em;
      left: -2px;
      content: '';
      border-left: 2px solid $darkGray;
      height: 2.2em;
    }
  }
}

  .wrap-feature {
    position: relative;
    border-left: 2px solid $darkGray;
    margin: 0px 12px;
    &:after {
      position: absolute;
      content: ' ';
      left: -2px;
      bottom: -108px;
      line-height: 108px;
      height: 108px;
      border-left: 2px solid $darkGray;
    }
  }

  .icon {
    position: absolute;
    background-color: transparent;
    left: -25px;
    color: gray;
    text-align: center;
    border: 2px solid $darkGray;
    font-size: 114%;
    line-height: 44px;
    width: 44px;
    height: 44px;
    border-radius: 22px;
    padding:0px;
    background-color:#fff;
  }

  h5, p.description {
    position: relative;
    top: 8px;
    margin-left: 26px;
  }

  h5 {
    color: $orange;
    letter-spacing: 105%;
    font-size: 22px;
  }

  p.description {
    font-size: 18px;
    margin-bottom: 2.2em;
  }