CSS：折り返し時にテキストのインデントが同じにならない前に

Question

カスタム箇条書きの後にテキストを表示しようとしています。箇条書きのポイントは "：before"擬似要素を使用して表示されますが、テキストが折り返されたときに最初の行に並んでいますが、 "：before"の内容と並んでいますか？ここで

私のHTML

<div class="row margin-top-15 slide-content"> 

<div class="col-xs-6"> 
    <h5 class="bullet-point">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium malesuada sagittis.</h5> 
</div> 

<div class="col-xs-6"> 
    <h5 class="bullet-point">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium malesuada sagittis. Pellentesque ac ultricies diam. Morbi semper nulla nisi, quis semper odio sollicitudin sit amet. Fusce vulputate luctus urna, at tincidunt ligula placerat ut. </h5> 
</div> 

であり、これは私のCSSクラスです

.bullet-point:before{ 
    content: '>'; 
    color: white; 
    background-color: #179fff; 
    border-radius: 100px; 
    width: 50px; 
    height: 50px; 
    display: inline-block; 
    line-height: 55px; 
    margin-right: 30px; 
    text-align:center; 
} 

Jsfiddle：https://jsfiddle.net/bmLmx0e2/1/

Answer 1

簡単な解決策は、箇条書きにposition: absoluteを与え、テキストにパディング左を追加することです。

https://jsfiddle.net/yemtbo50/

CSS：

.bullet-point { 
    position: relative; 
    padding-left: 60px; 
} 

.bullet-point:before{ 
    position: absolute; 
    left: 0; 
} 

そして親にposition: relativeを与えることを忘れないでください:)

Answer 2

最も簡単な解決策はfloat:leftを使用することです。..

https://jsfiddle.net/xravg01o/

.bullet-point:before{ 
    content: '>'; 
    color: white; 
    background-color: #179fff; 
    border-radius: 100px; 
    width: 50px; 
    height: 50px; 
    display: inline-block; 
    line-height: 55px; 
    margin-right: 30px; 
    text-align:center; 
    float:left; 
} 

Answer 3

私はそれはあなたを助けるだろうと思います。

.bullet-point{ 
    padding-left:60px; 
    position:relative; 
} 

.bullet-point:before{ 
    content: '>'; 
    color: white; 
    background-color: #179fff; 
    border-radius: 100px; 
    width: 50px; 
    height: 50px; 
    display: inline-block; 
    line-height: 55px; 
    margin-right: 30px; 
    text-align:center; 
    position:absolute; 
    top:0; 
    left:0; 
} 

https://jsfiddle.net/bmLmx0e2/2/