::marker 伪元素用于设置列表项标记的样式，可修改颜色、字体、大小等；它作用于 或 display: list-item 元素，常与 list-style-type 配合使用；支持属性有限，推荐用 ::before 实现更复杂自定义。
在CSS中，::marker 伪元素用于控制列表项（如 <li>）前面的标记符号样式，比如项目符号、数字或字母。它主要适用于使用 display: list-item 的元素，最常见于 <ul></ul> 和 <ol></ol> 中的列表项。
::marker 是一个专门用于设置列表标记样式的伪元素。它可以修改项目符号的颜色、字体、大小等视觉属性，而不会影响列表项的内容布局。
支持的元素包括：
<li> 元素（默认 display: list-item）
<li>任何设置了 display: list-item 的元素
注意：::marker 只能应用于生成标记的元素，不能用于普通文本或块级容器。
立即学习“前端免费学习笔记（深入）”；
你可以通过 ::marker 设置颜色、字体、字号等文本相关属性：
li::marker {
color: red;
font-size: 1.2em;
font-weight: bold;
}
上面的代码会让所有 <li> 前的项目符号或编号变成红色、加粗并放大。
对于有序列表（<ol></ol>），这会作用于数字；对于无序列表（<ul></ul>），则作用于项目符号（如圆点、方块等）。
::marker 控制的是标记的外观样式，而 list-style-type 决定标记的类型。两者可以配合使用：
ol.alpha-list li::marker {
color: blue;
content: counter(list-item, lower-alpha) ". ";
}
ul.custom-bullet li::marker {
color: green;
}
ul.custom-bullet {
list-style-type: square;
}
在这个例子中：
::marker 支持的CSS属性有限，仅限于：
color
<li>
font 相关（font-family, font-size, font-weight 等）
<li>text-combine-upright
<li>
unicode-bidi 和 direction
不支持设置 background、padding、margin 或 content（部分浏览器实验性支持 content，但标准中已移除）。
如果你想完全自定义标记内容（比如用图标或特殊字符），建议改用 ::before 伪元素并手动设置 content，同时取消默认列表样式：
.custom-icon li {
list-style: none;
}
.custom-icon li::before {
content: "★";
color: gold;
margin-right: 8px;
}
基本上就这些。::marker 提供了一种简洁方式来美化原生列表标记，适合需要轻量样式调整的场景。搭配 list-style-type 使用，能在保持语义化的同时提升视觉表现。
以上就是如何在CSS中使用伪元素::marker控制列表标记_结合::marker调整符号样式的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
266
收藏
