html - 如何更改css样式的边框圆形项目符号？

Question

<li>使用带有以下标签的标签时，我有这个项目符号list-style: circle：

如何用css更改圆圈的边框？像这样：

标签： htmlcsssass

Answer 1

您无法更改该圆圈的样式，但您可以应用list-style: none;到列表以隐藏列表图标并使用li: before伪元素添加圆圈元素，设置如下或类似：

ul {
list-style: none;
}
li {
position: relative;
}
li:before {
position: absolute;
left: -1.2em;
bottom: 0.3em;
content: ' ';
display: block;
width: 0.45em;
height: 0.45em;
border: 2px solid lightblue;
border-radius: 50%;
}

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>