css 如何用伪类圆点

CSS中有一种非常有用的伪类，那就是“::before”伪类。使用这个伪类，我们可以轻松实现一个带有圆点的列表。

li::before {
      content: "·";
      margin-right: 5px;
}
    

上面的代码中，我们使用“::before”伪类来在每个li元素前添加一个圆点。通过设置“content”属性为“·”，我们可以自定义圆点的样式。同时，为了让圆点与文本之间有一定的间隔，我们设置了“margin-right: 5px; ”。

需要注意的是，“::before”伪类所添加的内容默认是“行内元素”，而不是“块级元素”。因此，如果我们想让这个圆点与相应的li元素在同一行，就需要在li元素上设置“display: inline”或者“display: inline-block”。如果想要对列表进行缩进，可以使用“text-indent”属性。

li {
      display: inline-block;
      text-indent: 20px;
}
    

通过上述代码，我们可以实现一个带有圆点、一定缩进的列表。在实际应用中，我们可以根据需要自由调整圆点和缩进的样式。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！