css伪元素::marker在列表样式中的应用-css教程-PHP中文网

css伪元素::marker在列表样式中的应用

P粉602998670

发布： 2025-09-16 16:18:02

原创

687人浏览过

::marker伪元素用于自定义列表项标记样式，如改变颜色、大小和字体。可应用于ul、ol、li元素，支持color、font-size、font-weight、text-shadow等属性，示例包括将项目符号设为红色或加大编号字号。虽不支持content完全替换内容，但可结合计数器实现“第X条”效果，此时需使用::before伪元素。注意旧版浏览器兼容性及在Flex/Grid布局中的异常表现，且仅适用于默认生成标记的元素。合理使用::marker能精准控制列表外观，避免额外HTML或背景图。

css伪元素::marker在列表样式中的应用

在CSS中，::marker 伪元素用于控制列表项（如

li

登录后复制

）前面的标记符号样式，比如项目符号、数字或字母。它主要应用于

ul

登录后复制

、

ol

登录后复制

和

li

登录后复制

元素，让你可以自定义这些标记的外观，而不影响列表项的内容布局。

基本用法

::marker 可以修改标记的颜色、字体、大小，甚至替换内容（有限制）。以下是一些常见应用场景：

改变项目符号颜色
调整编号大小
统一不同浏览器的默认样式

示例：改变无序列表项目符号颜色

li::marker {
  color: red;
}

登录后复制

这样所有

li

登录后复制

前面的圆点就会变成红色，而列表文字保持原色。

支持的CSS属性

::marker 支持的属性较少，主要包括：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

color：设置标记颜色
content（部分支持）：不能完全自定义文本，但可用计数器配合
font-size：调整编号或符号大小
font-weight：改变粗细
text-shadow：添加阴影效果

示例：加大有序列表编号字号

ol li::marker {
  font-size: 1.2em;
  color: #0055aa;
  font-weight: bold;
}

登录后复制

这会让有序列表的数字更大更醒目。

与计数器结合使用

虽然不能直接通过 ::marker 修改内容，但可结合CSS计数器实现高级定制。

立即学习“前端免费学习笔记（深入）”；

示例：为每个列表项添加“第X条”前缀

ol {
  counter-reset: section;
}

ol li {
  counter-increment: section;
}

ol li::before {
  content: "第" counter(section) "条 ";
  color: green;
}

登录后复制

注意：这里用了 ::before，因为 ::marker 不支持任意

content

登录后复制

替换。若只改颜色和大小，仍建议用 ::marker。

注意事项

不支持在 ::marker 中使用
```
content: ""
```
登录后复制
完全替换原有标记
某些旧版浏览器（如IE）不支持 ::marker
在Flex或Grid布局中，::marker 可能表现异常，需测试
仅适用于具有默认标记行为的元素（如
```
li
```
登录后复制
）

基本上就这些。用好 ::marker 能让你更精细地控制列表样式，避免用背景图或额外标签实现简单效果。

以上就是css 伪元素::marker在列表样式中的应用的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

css边框颜色border-color设置技巧 CSS动画元素的初始状态如何设置_keyframes from与to技巧 CSS定位元素在不同浏览器中的表现一致吗_兼容性分析与优化 CSS框架Bulma的Flexbox布局如何使用_弹性盒子实践在css中link标签跨域样式引入问题