javascript - CSS伪元素混淆

Question

我很困惑如何解决这个问题，它的实际结构如下:

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

使用这个 CSS，我需要保留到达圆圈的线，即使橙色的 p.lead 文本必须换行也是如此。

  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;
    }
  }
}

原样( Not Acceptable )。我不一定需要“纯”CSS 解决方案。

Answer 1

我会通过不同的 HTML 结构来解决这个问题。无需 JS。

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

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

然后我会把图标 div 从 p 元素中拉出来。相反，它会位于包装器 div 内。我会将其定位为完全重叠包装器 div 的左边框。

我会使用标题(如 h2)而不是 p 作为节标题，但这不是完成这项工作所必需的。

h2.lead {
  position: relative;
  color: orange;
  font-size:24px;
  text-shadow: 0px 0px grey;
  margin-left: 8px;
}

.wrapper {
  position:relative;
  border-left: 2px solid gray;
  margin: 20px;
  padding:20px;
  width: 350px
}

.icon {
  position: absolute;
  top: 40px;
  left: -25px;
  margin-right: 0.3em;
  color: gray;
  text-align: center;
  border: 2px solid gray;
  font-size: 50px;
  line-height:1;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  padding:0px;
  background-color:#fff;
}

p.description {
  position: relative;
  margin-bottom: 2em;
  font-size: 18px;
  margin-left: 8px;
}

<div class="wrapper">
  <div class="icon">✪</div> 
  <h2 class="lead"> Here's some header text.
  Orange Header Text </h2>
  <p class="description"> lorem ipsum... </p>  
</div>