html - 如何让文字远离子弹？

Question

是否可以使文本从项目符号中换行，例如使用list-style-position: outside但使用我的自定义伪元素项目符号？

div {
  width: 250px
}

ul {
  padding: 10px;
  list-style: none;
}

ul>li::before {
  padding-right: 10px;
  position: relative;
  top: 5px;
  font-size: 2em;
  content: "\2022";
  color: #fee100;
}

<div>
  <ul>
    <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
    <li>VLorem Ipsum is simply dummy text of the printing.</li>
  </ul>
</div>

Answer 1

您可以使用绝对位置而不是带负值的相对位置：

div {
  width: 250px
}

ul {
  padding: 10px;
 list-style: none;
}

ul>li {
 position:relative;
}

ul>li::before {
  padding-right: 10px;
  position: absolute;
  left:-15px;
  top:-10px;
  font-size: 2em;
  content: "\2022";
  color: #fee100;
}

<div>
  <ul>
    <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
    <li>VLorem Ipsum is simply dummy text of the printing.</li>
  </ul>
</div>