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

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

P粉602998670

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

原创

690人浏览过

::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 支持的属性较少，主要包括：

Gridster.js多列网格式拖动布局插件

网页中拖动 DIV 是很常见的操作，今天就分享给大家一个 jQuery 多列网格拖动布局插件，和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小，并且支持多列的网格布局，它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的 HTML 元素转换为网格组件

查看详情

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中link和@import的区别 css权重的计算规则 css中first-letter是什么 css中counter()函数的介绍 css有哪些字体文本样式