要使用::marker伪元素自定义列表标记的颜色、大小和字体，可通过color、font-size和font-family属性直接设置，例如“ul li::marker { color: red; font-size: 1.2em; font-family: arial; }”即可改变标记的样式，该方法直观且无需隐藏默认标记，适用于现代浏览器，但在需要复杂布局或兼容旧浏览器时需考虑替代方案。
在HTML中设置列表项标记样式，主要依赖于CSS的
list-style属性家族，以及一个相对较新但功能强大的伪元素——
::marker。
list-style可以控制列表项的标记类型（如圆点、方块、数字等）或使用自定义图片。而
::marker伪元素则允许我们更精细地控制这些标记本身的样式，比如它们的颜色、大小、字体，甚至是内容，它直接作用于浏览器为列表项自动生成的标记符号上。
解决方案
要设置HTML列表项的标记样式，我们通常从
<ul>或
<ol>标签下的
<li>元素入手。最直接的方式是使用
list-style-type属性来选择预设的标记类型，比如
disc（实心圆）、
circle（空心圆）、
square（方块）或者各种数字和字母格式。如果想用自定义图片作为标记，可以使用
list-style-image属性。
但这些方法都有点局限，它们只能改变标记的“形状”或“图片”，却很难直接控制标记本身的颜色、字体大小等视觉细节，或者说，要实现这些往往需要一些变通的技巧。这时候，
::marker伪元素就显得格外有用了。
立即学习“前端免费学习笔记（深入）”；
::marker伪元素专门用来选取和样式化列表项（
<li>）前面自动生成的标记符号。你可以把它想象成一个独立的、只包含标记内容的“小盒子”，我们可以直接给这个“小盒子”上色、调整大小。
举个例子，如果我们想让一个无序列表的圆点变成红色，并且大一点，你可以这么写：
ul li {
/* 保持默认的圆点标记 */
list-style-type: disc;
}
ul li::marker {
color: red;
font-size: 1.2em;
/* 还可以调整字体，比如让它更粗 */
font-weight: bold;
}对于有序列表，
::marker同样适用，它会作用于自动生成的数字或字母。比如，让数字变成蓝色：
ol li::marker {
color: blue;
}::marker的出现，让列表标记的样式控制变得更加直观和强大，它避免了过去为了自定义标记而不得不隐藏默认标记，然后使用
::before伪元素模拟标记的复杂操作。它直接提供了一个标准化的方式来触达那个“标记本身”。
如何使用::marker
伪元素自定义列表标记的颜色、大小和字体？
使用
::marker伪元素来定制列表标记的颜色、大小和字体，是它最核心也最常用的功能之一。这玩意儿说白了，就是把那个默认的圆点、方块或者数字，当作一个独立的文本字符来对待，然后我们就可以像给普通文本加样式一样去操作它。
要改变颜色，直接用
color属性就行了。比如，你有一个列表，想让它的标记变成一种特别的品牌色，比如
#007bff（一种蓝色），你可以这么做：
ul li::marker {
color: #007bff; /* 设置标记颜色为蓝色 */
}至于大小，
font-size属性是你的好朋友。记住，
::marker里的标记本质上是文本字符，所以用
font-size来控制它的大小是完全符合逻辑的。你想让它比列表项的文本大一点，或者小一点，都可以通过相对单位（如
em、
rem）或固定单位（如
px）来设置：
ul li::marker {
font-size: 1.5em; /* 让标记比父元素的字体大1.5倍 */
}而字体，也就是
font-family属性，也能用在
::marker上。这在某些情况下很有用，比如你希望列表标记的数字或字母使用一种特定的衬线字体，而列表项内容使用无衬线字体，以形成视觉上的对比。
ol li::marker {
font-family: 'Times New Roman', serif; /* 让数字标记使用衬线字体 */
font-weight: bold; /* 加粗 */
}这几个属性的组合使用，能让你对列表标记的视觉呈现有极大的控制力，远超
list-style-type所能提供的范畴。我个人觉得，这其实是个很巧妙的设计，它把一个原本有点“魔术”性质的自动生成内容，变成了一个可以被CSS直接操作的实体，让前端开发者少了很多“曲线救国”的麻烦。
除了颜色和大小，::marker
还能改变列表标记的内容吗？
答案是肯定的，而且这正是
::marker伪元素最有趣也最有创造力的一个功能：通过
content属性，你可以完全替换掉默认的列表标记。这就像给你的列表项换上一个全新的“前缀”，不再局限于传统的圆点或数字。
你可以用它来插入任何你想要的文本字符串、表情符号（emoji），甚至是特殊的Unicode字符。这在很多场景下都非常实用，比如你想用一个对勾符号来表示已完成的任务列表，或者用一个星号来突出显示某些条目。
看几个例子：
1. 使用自定义字符串或特殊字符：
ul li::marker {
content: "? "; /* 用一个手指指向的表情符号作为标记 */
color: green; /* 顺便把颜色也改了 */
}这样，你的列表项前面就会出现一个绿色的手指指向符号，而不是传统的圆点。
2. 结合CSS计数器实现高级编号：
虽然
::marker本身不能直接处理复杂的计数逻辑（那通常是
counter-reset和
counter-increment的工作），但它可以利用这些计数器生成的内容。这意味着你可以创建更灵活的编号方案，比如在数字后面加上一个点，或者在前面加上“第”字。
/* 首先，我们需要在父元素上重置计数器 */
ol {
counter-reset: my-list-counter;
}
ol li {
/* 确保默认的数字标记被隐藏，或者让::marker完全覆盖 */
list-style-type: none;
}
ol li::marker {
counter-increment: my-list-counter; /* 每遇到一个li，计数器加1 */
content: "第" counter(my-list-counter) "项： "; /* 组合字符串和计数器值 */
font-weight: bold;
color: purple;
}这样，你的有序列表就会显示为“第1项：”、“第2项：”这样的格式，是不是有点意思？这比单纯的数字要个性化多了。
通过
content属性，
::marker真正突破了传统
list-style的限制，让列表标记的设计变得无限可能。在我的实践中，我发现这在制作一些自定义组件或者设计特定风格的文档时，能省去不少麻烦。不过，需要注意的是，自定义
content后，原有的
list-style-type就基本失效了，因为
::marker的
content会直接覆盖它。
在实际项目中，::marker
伪元素有哪些常见的应用场景和注意事项？
在实际的项目开发中，
::marker伪元素是一个非常实用的工具，但它也有自己的脾气和局限性。了解这些能帮助你更好地利用它，同时避免一些不必要的坑。
常见的应用场景：
-
品牌化与个性化列表： 这是最直接的用途。很多时候，设计师会要求列表的标记不是简单的圆点或数字，而是符合品牌调性的特定颜色、大小，甚至是自定义的图标（通过
content
属性插入emoji或Unicode字符）。::marker
让这种定制变得异常简单。 - 增强可读性和视觉层次： 通过调整标记的颜色、字体大小或粗细，可以使列表项的视觉焦点更明确，帮助用户更快地理解信息层级。例如，在步骤说明中，让数字标记更醒目。
-
To-Do List 或状态列表： 结合
content
属性，可以轻松地将默认标记替换为✅（已完成）或❌（未完成）等符号，为用户提供直观的状态反馈。 -
简单的图标列表： 对于一些不需要复杂布局的“图标+文字”列表，
::marker
配合content
插入小图标（比如font-awesome
的unicode字符，或者直接的SVG/emoji）比使用::before
并调整定位要省事得多。
注意事项和挑战：
-
有限的CSS属性支持： 尽管
::marker
很强大，但它并不是一个完整的“盒子模型”元素。这意味着你不能直接给它设置width
、height
、padding
、margin
（除了margin-inline-start
在某些情况下可能有点作用，但通常不推荐直接操作）、background
、border
等属性，或者说，这些属性即使设置了，其行为也可能不是你所期望的。它主要响应文本相关的属性，如color
,font-*
,text-align
,content
。 -
定位限制：
::marker
的定位是由浏览器内部机制控制的，通常位于列表项内容之前。你无法像对待一个独立的div
一样去精确地调整它的位置。如果你需要标记在列表项文本的特定位置（例如，垂直居中对齐一个多行文本的列表项），或者需要标记有复杂的背景/边框，那么::marker
可能就不够用了。这时候，你可能需要回归到传统的list-style: none;
然后使用li::before
伪元素来创建和定位自定义标记，并结合display: flex;
等布局方式来精确控制对齐。 -
浏览器兼容性： 尽管现代浏览器对
::marker
的支持已经相当好，但在一些老旧的浏览器版本中，它可能不支持或者支持不完全。所以在生产环境中，如果目标用户群体包含这些老旧浏览器，可能需要考虑提供一个降级方案（比如，让list-style-type
作为回退）。 -
list-style-position
的影响：list-style-position: inside;
和list-style-position: outside;
会影响标记与列表项内容的关系。::marker
通常会遵循这个规则。如果设置为inside
，标记会成为列表项内容的一部分，在文本流内。如果设置为outside
（默认），标记则在列表项内容区域之外。这在某些布局下需要特别注意。 -
与
list-style
属性的交互： 当你使用::marker
并设置了content
属性时，它会覆盖掉list-style-type
的效果。如果你只是想改变颜色或大小，而保留默认的标记类型，那么list-style-type
仍然需要设置。
总的来说，
::marker是一个非常方便的工具，适用于大部分列表标记的视觉定制需求。但对于那些需要像素级精确控制、复杂背景或非文本性质标记的场景，理解其局限性并知道何时转向
::before等更灵活的CSS技术，是作为一名开发者需要掌握的。
