Javascript CSS：文本之前不'；包装时不要有相同的压痕

我试图在自定义项目符号后显示一些文本。使用“：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>

---

Jsfiddle:

最简单的解决方案是使用

float:left

---

一个简单的解决方案是在项目符号中添加

位置：绝对
，并在文本中添加一个空白


CSS:

别忘了给父母一个相对的位置：）
我想这会对你有帮助

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

像这样的东西-
.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;
} 

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

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

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