[分享]css列表前面小圆点

CSS中的列表有着非常重要的作用，可以让网页更加清晰易读，并且让页面看起来更加美观。其中最基础的就是小圆点，可以使用CSS对小圆点进行自定义，让列表造型更加精美。ul { liststyle: non...

CSS中的列表有着非常重要的作用，可以让网页更加清晰易读，并且让页面看起来更加美观。其中最基础的就是小圆点，可以使用CSS对小圆点进行自定义，让列表造型更加精美。

ul {
    list-style: none;
}

/* 默认列表样式 */
li {
    margin: 0 0 5px 25px;
    padding: 0;
    text-indent: -15px;
}

/* 定制小圆点样式 */
li:before {
    content: "25CF";
    color: #333;
    display: inline-block;
    width: 15px;
    margin-left: -25px;
} 

以上代码就是使用CSS自定义小圆点的示例，首先我们将列表的默认样式设置为none，然后重新定义li标签的样式。我们主要给li标签添加了一个:before伪元素，这个元素实际上是li标签的一个子元素，可以在它的前面添加文本或者装饰性图形等内容。

使用content属性为该元素填充了一个实心圆点，使用color属性控制小圆点的颜色，使用display属性把它变为行内块级元素，使用width属性调整大小，而margin-left属性定位它的位置。完美的小圆点就这样被定义出来了。

当然，人们经常使用其它符号作为列表的圆点，例如-号、实心正方形等等。需要根据实际情况与需求来自定义圆点的样式。