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

原样（不可接受）。我不一定需要一个“纯粹的”CSS解决方案。

Answer 1

我会通过不同地构造HTML来解决这个问题。不需要JS。

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

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

然后我将图标div从p元素中拉出来。它将改为包装div内。我绝对会将它放在与包装div的左边界重叠的位置。

我会使用标题（如h2）而不是p来表示节标题，但这并不是必须的。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

（代表OP发表答案）。

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

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

CSS伪元素混淆

2 个答案: