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

最简单的解决方案是使用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 2

一个简单的解决方案是给项目符号rotateX并在文本中添加一个填充。

https://jsfiddle.net/yemtbo50/

CSS：

position: absolute

并且不要忘记将.bullet-point { position: relative; padding-left: 60px; } .bullet-point:before{ position: absolute; left: 0; } 提供给父母：）

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/