使用 CSS ::marker 的下一级列表项目符号

在本教程中，我们将使用::marker伪元素，它使我们能够对列表项上的“标记框”进行样式访问。然后我们可以使用它用图标、文本、svg 替换默认列表项目符号；几乎任何我们喜欢的！让我们来看看。

我们正在创造什么

See the Pen  Next-level List Bullets with the ::marker Pseudo-element by Envato Tuts+ (@tutsplus)  on CodePen.

列表项的结构

列表和列表项自 html 最初构思以来就已经存在，虽然我们一直能够对它们进行样式设计，但设计师从未真正关注过它们的结构。列表项有一个项目符号和一些文本，对吗？

他们的官方定义将列表项描述为包含一个主要块框，带有一个标记框来指示一个项目符号。

为了给列表项设置样式，我们通常做的是删除项目符号并添加额外的元素（通常是伪元素或背景图像）来创建我们自己的。

然而，如今，作为 css 伪元素模块 4 的一部分，我们有了一个新元素，称为标记。这使我们可以直接访问浏览器生成的标记框（因此可以直接访问项目符号）。 

允许的 CSS 标记属性

我们可以在某种程度上使用这种直接访问样式项目符号。目前可用的属性数量有限：

• font-*特性

• white-space

• color

• direction

• content

• animation

• transition

我们目前不能使用background样式，也不能使用margin, padding,width等height。但是即使有了我们拥有的属性，我们仍然可以创建一些看起来很酷的子弹！

浏览器支持

浏览器支持非常好，所有主流浏览器都支持使用标记。任何较旧的、不支持的浏览器都将简单地忽略任何标记样式并显示定义的任何默认或备用项目符号样式。所以没有理由不使用标记！

列表样式示例

我在视频教程中查看了更多示例（正如您从演示中看到的那样），但现在我想从演示“旧”的做事方式开始。

我们可以list-style-type用来定义子弹应该是什么：

这将简单地将我们自定义列表项上的项目符号替换为>. 我们可以在这个值中放入我们喜欢的任何文本。甚至是表情符号！

我们还可以使用color此处的属性来更改标记框中和主块中的任何文本的文本。不幸的是，这确实意味着您不能单独为每个部分着色。

标记示例

现在让我们看看标记伪元素如何帮助我们。在类似的示例中，我们可以使用li::marker.

通过以这种方式更改颜色，我们仅更改项目符号，而不更改列表项中的文本。

看看这个例子，我已经定位了所有 ::marker 元素，将它们设为绿色，然后只定位第二个孩子并将其设为大而蓝色。

要更改项目符号本身，您可以使用content: '';属性并添加字符，就像我们在第一个示例中使用list-style-type. 同样，表情符号也有效。

非列表项作为列表项

您可能希望将某些元素显示为列表项，即使它们不是这样。例如，使用该display属性我们可以更改段落的显示方式，然后也可以定位它::marker！

样式化有序列表

有序列表也可以被操纵。编号通常在使用有序列表时非常重要，所以让我们通过将内容更改为文本字符串并list-item附加计数器来增加我们的数字：

我们还在此列表中添加了悬停样式，当鼠标光标悬停在标记上时会更改标记的颜色。为了使悬停更进一步，您也可以在颜色上使用过渡。

您会注意到这些列表项上的填充是狭窄的，那是因为我默认删除了所有填充。要将其放回去，请将其添加到li元素中。

使用 SVG 作为标记

对于我们的最后一个示例，让我们使用 SVG 图标作为标记！我们可以通过将 SVG 编码为 data URI（请参阅此编码器以获取您想要的代码）并将其直接粘贴到 CSS 中来做到这一点，如下所示：

结论

这应该为您使用 CSS 自定义您自己的列表项目符号提供了一个坚实的开端！在社交媒体上让我们知道您设法创建的内容。