html - 如何设置此 <li> 的样式，使句子的第二行刚好在它的开头下方而不是在元素符号下方？

Question

我的问题是如何让 li 的第二行从句子开头的正下方开始，而不是在箭头下方？

<ul class="arrow-list">
    <li>Clear and consistent brand identity</li>
    <li>+47.08% Increase in website registrations</li>
</ul>

.arrow-list li {
  color: #0054a6;
  margin-bottom: 4px;
  display: block;
}
.arrow-list li:before {
  font-family: 'ElegantIcons';
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  content: "\39";
  color: #0054a6;
  font-size: 18px;
  display: inline-block;
  margin-right: 18px;
  position: relative;
  top: 4px;
}

Answer 1

像这样:

.arrow-list li {
    position: relative;
    margin-left: 20px;
}
.arrow-list li:before{
    position: absolute;
    left: -20px;
}

http://jsfiddle.net/kz41hvfu/