CSS擬似要素の混乱

Question

、このCSSを使用して

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

は、私はしても、円に達するラインを維持する必要がありますオレンジ色の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は必要ありません。

アイコンとヘッダーテキストが同じ行にあることは、本質的に問題になります。ヘッダーテキストが折り返されると、それはあなたが実演したのとまったく同じように、行頭で再び始まります。

まず、wrapper divにすべてをラップし、それを使って：before要素を使用する代わりに2pxの左境界線を作成します。

次に、アイコンdivをp要素から引き出します。代わりに、ラッパーdiv内にあるはずです。私はそれをラッパーdivの左の境界と重なるように絶対に配置します。

セクションヘッダーにpの代わりにヘッダー（h2など）を使用しますが、これを行う必要はありません。

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

（OPに代わって投稿答え）。 （受け入れ答えからの助けを借りて）

SOLUTION

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