通过结合css的::marker伪元素与list-style属性，可灵活自定义列表标记的颜色、字体和内容，提升可读性与视觉美感。::marker作用于li元素的项目符号或编号，支持color、font等属性，不影响文本内容，如设置li::marker { color: #e74c3c; font-weight: bold;}使标记变红加粗。list-style简写属性控制标记类型（disc、decimal等）、图像和位置，例如ul { list-style: square inside;}。进阶应用中，可精细化调整颜色字体，如ol li::marker { color: #2980b9; }；或隐藏默认标记，用::before插入自定义符号实现更自由设计；还可结合类名响应状态，如li.done::marker { color: #2ecc71;}用于任务完成提示。现代浏览器支持良好，但::marker不支持宽高、背景图等布局属性，复杂效果需用::before替代。合理搭配两者可在保持语义结构的同时显著增强列表表现力。
在现代网页设计中，有序或无序列表的默认样式往往显得单调。通过结合CSS伪元素 ::marker 与 list-style 属性，我们可以更灵活地控制列表项前的标记样式，实现更具视觉吸引力的列表设计。这不仅提升可读性，也增强页面整体美感。
理解 ::marker 伪元素
::marker 是应用于列表项（li）的伪元素，代表项目符号或编号本身。它仅适用于设置了 display: list-item 的元素，比如 li 或自定义的块级列表项。
使用 ::marker 可以单独设置标记的颜色、字体、内容等，而不影响列表项中的文本内容。
示例：
li::marker {
color: #e74c3c;
font-weight: bold;
}
这样就能让编号或项目符号变为红色加粗，而正文保持原样。
立即学习“前端免费学习笔记（深入）”；
list-style 的基础控制
list-style 是一个简写属性，用于设置列表的标记样式、位置和图像。常见取值包括：
- list-style-type：定义标记类型，如 disc、circle、square、decimal 等
- list-style-image：用图片替代默认标记
- list-style-position：控制标记位置，inside 或 outside
例如：
ul {
list-style: square inside;
}
ol {
list-style-type: upper-roman;
}
结合 ::marker 实现高级美化
当 list-style 提供基础样式后，::marker 可进一步精细化调整。以下是几种实用场景：
1. 自定义颜色与字体
ol li::marker {
color: #2980b9;
font-size: 1.1em;
}
让有序列表的数字更醒目，突出层级结构。
2. 隐藏默认标记并用内容替代
虽然不能直接用 ::marker 插入复杂内容，但可通过隐藏原有标记并结合 ::before 实现更自由的设计。
ul.custom-list li {
list-style: none;
}
ul.custom-list li::before {
content: "→";
color: #27ae60;
margin-right: 8px;
}
此时 ::marker 已被移除，由 ::before 完全接管样式控制。
3. 动态样式响应状态
结合伪类，可实现交互反馈：
li.done::marker {
color: #2ecc71;
}
li.pending::marker {
color: #f39c12;
}
适用于任务列表，通过颜色快速传达完成状态。
兼容性与注意事项
::marker 在现代浏览器中支持良好（Chrome、Edge、Firefox、Safari），但在一些旧版本中可能受限。建议在使用时进行测试，必要时提供降级方案。
注意：::marker 不支持所有CSS属性，仅限于：
- color
- font
- text-combine-upright, unicode-bidi
- content（部分浏览器支持）
不能设置宽高、背景图或边框，如需更复杂效果，应考虑使用 ::before 替代。
基本上就这些。合理搭配 list-style 与 ::marker，能在不破坏语义结构的前提下，显著提升列表的视觉表现力。不复杂但容易忽略。
