css中当前小圆点改变颜色

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS中的小圆点(点状列表标记)通常都是默认颜色,有时候我们需要将其改变为其他颜色。这可以通过下面这段CSS代码来实现: ul { list-style-type: none; } ul li::be

CSS中的小圆点(点状列表标记)通常都是默认颜色,有时候我们需要将其改变为其他颜色。这可以通过下面这段CSS代码来实现:

ul {
  list-style-type: none;
}

ul li::before {
  content: "?";
  color: red;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
} 

上面的CSS代码中,我们使用了伪元素`::before`来创建了一个点状列表标记,并为其设置了`content`属性。`display`属性设置为`inline-block`则使它在列表项的文本之前显示,而`margin`属性则将它向左移动一个字体宽度的距离,从而与前面的文本对齐。

最后的关键是通过`color`属性来为点状列表标记设置颜色。在上面的例子中,我们将颜色设置为红色(red),你可以根据自己的需要调整它。

需要注意的是,我们将`list-style-type`属性设置为`none`,从而去除了原来的默认列表标记。这一点非常重要,否则新创建的点状列表标记会和原来的默认标记重叠出现。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中当前小圆点改变颜色

粉丝

0

关注

0

收藏

0

已有0次打赏