如何将文本从项目符号中换行？

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: "22";
  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: "22";
  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>

如何将文本从项目符号中换行？

How to wrap text away from the bullet?

html

css

listitem

bulletedlist

html-lists