更改项目符号在无序列表中的位置

Question

我有 ul 项目符号列表，是否可以更改项目符号在列表中的位置？

例如下面这个列表：

<ul>
  <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
  <li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
</ul>

应该显示为

Answer 1

您可以使用伪元素代替li的项目符号。

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
  position: relative;
  padding-left: 15px;
}

ul li:before {
  content: "•";
  font-size:20px;
  position: absolute;
  left: 0;
  top: -5px;
}

<ul>
  <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
  <li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
</ul>

更改项目符号在无序列表中的位置

Change the positioning of bullets in a unordered list

html

css

html-lists