在本教程中，我们将使用::marker 伪元素，它使我们能够对列表项的 "标记框 "进行样式设计。然后，我们可以用它来替换默认的列表子弹，包括图标、文本、SVG；几乎所有我们喜欢的东西！让我们来看看。让我们看一看。
我们正在创建的东西
列表项的结构
自HTML诞生以来，列表和列表项就一直存在，虽然我们一直能够对它们进行样式设计，但设计师们从未真正关注过它们的结构。列表项有一个子弹和一些文本，对吗？
他们的官方定义将列表项描述为包括一个主块框，并有一个标记框来表示子弹：
为了使列表项具有风格，我们通常要做的是去除子弹，并添加额外的元素（通常是伪元素，或背景图片）来创建我们自己的元素：
然而，如今，作为CSS伪元素模块4的一部分，我们有一个新的元素，叫做标记，可以使用。这让我们可以直接访问由浏览器生成的标记框（因此可以直接访问子弹）。
允许的CSS标记属性
我们可以在_某种程度上_利用这种直接访问来设计子弹。目前，可用的属性数量有限：
font-*属性white-spacecolordirectioncontentanimationtransition
我们目前不能使用background 样式，也不能使用margin,padding,width,height 等。但是，即使使用我们所拥有的属性，我们仍然可以创建一些看起来非常酷的子弹
浏览器支持
浏览器支持是相当好的，所有主要的浏览器都支持使用标记器。任何旧的、不支持的浏览器将简单地忽略任何标记样式，并显示任何默认的或后备的子弹样式。所以，没有理由不使用标记符!
列表样式类型的例子
我在视频教程中讲述了更多的例子（你可以从演示中看到），但现在我想先演示一下 "旧 "的方式。
我们可以使用list-style-type 来定义子弹应该是什么：
li {
list-style-type: '> ';
}
这将简单地用> 替换我们的自定义列表项上的子弹。我们可以在这个值中放入任何我们喜欢的文本。甚至是一个表情符号!
我们还可以在这里使用color 属性来改变标记框中的任何文本，以及主块中的文本。不幸的是，这意味着你不能为每个部分单独着色。
标记示例
现在让我们看看标记伪元素如何帮助我们。在一个类似的例子中，我们可以通过使用li::marker ，专门针对标记：
li::marker {
color: green;
}
通过这种方式改变颜色，我们_只_改变子弹，而不是列表项中的文本。
看看这个例子，我把所有的::标记元素作为目标，使它们变成绿色，然后只针对第二个子元素，使它变成大的和蓝色。
要改变子弹本身的内容，你可以使用content: ''; 属性并添加字符，就像我们在第一个例子中使用的list-style-type 。同样，emojis也可以。
将非列表项作为列表项
你有可能想把你的一些元素显示为列表项，即使它们不是这样的。例如，使用display 属性，我们可以改变一个段落的显示方式，然后也可以针对它的::marker!
p {
display: list-item;
}
p::marker {
content: '❤️';
}
有序列表的样式
有序列表也可以被操作。在使用有序列表的地方，编号通常是非常重要的，所以让我们通过将内容改为文本字符串并附加上list-item 计数器来使我们的数字更生动。
ol li::marker {
content: 'Step ' counter(list-item);
color: green;
}
ol li:hover::marker {
color : blue;
}
我们还为这个列表添加了一个悬停样式，当鼠标指针悬停在它上面时，改变标记的颜色。为了使悬停更进一步，你也可以在颜色上使用转场：
你会注意到这些列表项上的填充物很拥挤，那是因为我默认删除了所有的填充物。要把它放回去，请把它添加到li 元素中。
使用SVG作为标记
在我们的最后一个例子中，让我们使用一个SVG图标作为标记！我们可以通过对SVG进行编码来实现。我们可以通过将SVG编码为数据URI（参见这个编码器来获得你想要的代码），然后像这样直接粘贴到CSS中。
li::marker {
content: url("Data URI goes in here");
}
结语
这应该给你一个坚实的开始，让你用CSS来定制自己的列表子弹请在社交媒体上告诉我们你所创造的东西。
