在 奇妙的 CSS 计数器世界 第一部分 主要介绍了使用 list-style（以及它们的子属性list-style-type、list-style-image和list-style-position）属性给列表项设置列表项标记符样式。除此之外，还可以使用 @counter-style 规则来自定义列表项标记符（list-style-type的值）。事实上，每个列表顶的标记符都是::marker伪元素生成的标记框的内容。在这部分中，我们开始进入::marker伪元素世界。感兴趣的请继续往下阅读。

::marker 伪元素

在 CSS 中，li 元素和使用display为list-item的元素都会有一个标记框（Marker Box），对应的就是::marker伪元素。列表项或display为list-item的元素其标记符的特征（即标记符样式）是由这个标记框的样式决定的，它是一个符号或序列号。默认情况之下，无序列表的标记符是一个符号，而有序列表的标记符是一个序列号。

注意，display 除了list-item会生成列表项标记框之外，还可以是inline list-item和block list-item，有关于 display 更详细的介绍，可以阅读《display属性》一文。

在 CSS 布局模型中，列表项的标记由一个与每个列表项相关的标记框表示：

这个标记的内容可以通过列表项上的list-style-type和list-style-image属性以及::marker伪元素分配属性来控制。虽然，使用 list-style-image 可以引用图片来调转标记符样式或使用list-style-type使用字符以及结合@counter-style自定义的标记符给列表标记符设置样式。但他们有一定的局限性，比如要控制他们的位置，个性化的样式等。但我们可以使用::marker伪元素content定义列表项标记符，并且可以很好的对其样式做个性化方面的处理。比如说，只改变列表项标记符的 颜色、大小、位置 等，甚至还可以构建个性化非常强的标记符效果。

CSS Lists and Counters Module Level 3规范第一部分内容就是专门介绍::marker伪元素的！简单地说，列表项的标记框（Marker Box）是由一个列表项的::marker伪元素生成的，而且作为该列表项的第一个子元素。

列表项标记框的内容

试着回忆一下，默认的列表项和display为list-items的元素，::marker对应的内容是什么？这里指的是其计算之后的内容。比e如，在列表项上未显式使用 CSS 的 list-style-type 或 list-style-image 指定任何标记符样式，那么标记框（即::marker）的content的值为normal。

规范中对于标记框的内容是什么，是有明确的规则声明的。简单地说，标记框的内容是由下面这些条件中第一个为真的条件决定的：

• ①：::marker伪元素的content的值不是normal ：标记框的内容由content属性决定，和伪元素::before和::after完全一样，但当content的值为none时，::marker被移除，标记框中会没有任何内容
• ②：元素的list-style-image显式定义了一个标记符为图像 ：标记框包含了一个匿名的内联替换元素（代表指定的标记图像），并且在标记图像后面紧跟了一个空格符（U+0020，即空格键符，相当于按了键盘上的 SPACE键）
• ③：元素的list-style-type显式定义了一个标记符 ：标记框包含一个由指定标记字符串组成的文本
• 否则，标记框会没有内容，并且::marker不会生成一个框，类似于display: none一样

此外，UA可能转化为空格或丢弃任何保留的强制换行。

我们通过示例来解释。

先来看第一种情况。如果规则②和规则③都成立（为真），即没有显式给列表项设置list-style-type和list-style-image属性值，这个时候：

• 无序列表的列表项（li）的 list-style-type是disc，list-style-image 为none
• 有序列表的列表项（li）的 list-style-type是decimal，list-style-image为none
• display为list-item的元素，和无序列表项的表现相似，即list-style-type为disc，list-style-image为none

在此基础上，我们将调整 规则①。即，在::marker伪元素的content指定不同的值：

:root {
    --content: normal;
}

.list-item::marker {
    content: var(--content);
}

content的值运用了上一部分中提到的content可用值，最终效果如下：

当::marker的content的值为normal时，标记框的内容则是列表项list-style-type的默认值：

当::marker的content的值设置为none时，这个时候标记框会被移除，相当于display: none：

当::marker的content的值设置为inherit时，它的表现将和content取值为normal相同。

当::marker的content的值设置为空字符串（" "），列表项标记框的内容为空字符串，并且将覆盖list-style-type的默认样式。虽然标记框内容为空，但::marker不会被移除：

当::marker的content的值设置为其他格式，比如文本字符串，HTML实体符，Emoji表情符号，图像等，标记框的内容将是content的值指定的内容，并且会覆盖list-style-type的默认样式：

接下来看第二种情况，将规则②中的list-style-image显式设置一个指定的值，但规则③不变（list-style-type不显式设