CSS pseudo-element confusion

Question

I'm puzzled how to work out this problem, which has a practical structure like so:

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

Using this CSS, I need to preserve the line reaching the circle, even if the orange p.lead text has to wrap.

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

As is (unacceptable). I don't need a "pure" css solution, necessarily.

Answer 1

I would approach this by structuring the HTML differently. No JS needed.

Having the icon and the header text in the same line will be inherently problematic. When the header text wraps, it's going to start again at the beginning of the line, exactly as you have demonstrated.

First, I would wrap the whole thing in a wrapper div and use that to create the 2px left border instead of using :before elements.

Then I would pull the icon div out of the p element. It would instead be inside the wrapper div. I would position it absolutely to overlap the wrapper div's left border.

I would use a header (like an h2) instead of ap for the section header, but that's not necessary to make this work.

 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>

Answer 2

(Posted answer on behalf of the OP) .

SOLUTION (with help from the accepted answer)

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