::marker伪元素用于自定义列表项标记样式，如改变颜色、大小和字体。可应用于ul、ol、li元素，支持color、font-size、font-weight、text-shadow等属性，示例包括将项目符号设为红色或加大编号字号。虽不支持content完全替换内容，但可结合计数器实现“第X条”效果，此时需使用::before伪元素。注意旧版浏览器兼容性及在Flex/Grid布局中的异常表现，且仅适用于默认生成标记的元素。合理使用::marker能精准控制列表外观，避免额外HTML或背景图。
在CSS中，::marker 伪元素用于控制列表项（如
li
）前面的标记符号样式，比如项目符号、数字或字母。它主要应用于
ul
、
ol
和
li
元素，让你可以自定义这些标记的外观，而不影响列表项的内容布局。
基本用法
::marker 可以修改标记的颜色、字体、大小，甚至替换内容（有限制）。以下是一些常见应用场景：
- 改变项目符号颜色
- 调整编号大小
- 统一不同浏览器的默认样式
示例：改变无序列表项目符号颜色
li::marker { color: red; }
这样所有
li
前面的圆点就会变成红色，而列表文字保持原色。
支持的CSS属性
::marker 支持的属性较少，主要包括：
- 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 html 伪元素 浏览器 css属性 grid布局 red css html 伪元素 flex ul li