本文将介绍CSS::marker中一个更有趣的伪元素。有了它，我们可以让我们的文字序号变得更加有趣！什么是::markerCSS伪元素::marker是一个比较新的伪元素，从CSS伪元素Level3[1]开始加入，在CSS伪元素Level4[2]完善。从Chrome86+开始，浏览器就支持它了。使用它，我们可以在元素中添加一个伪元素来生成项目符号或数字。通常，我们有以下结构：

• Contagious
• Stages
• Pages
• Courageous
• Shaymus
• Faceless

默认不添加任何特殊样式，其样式大致是这样的：使用::marker，我们可以修改序列号前面的小点：li{padding-left:12px;cursor:pointer;color:#ff6000;}li::marker{content:'>';}可以把小圆点变成我们想要的任何东西：::marker伪元素的一些限制首先，你可以响应::marker的元素只能是列表项，比如ul里面的li和ol里面的li都是列表项。当然不是说我们要用在其他元素上就没有办法。除了列表项，我们可以对任何设置了display:list-item的元素使用::marker伪元素。其次，对于伪元素中的style，并不是任何style属性都可以使用，目前只能使用这些：所有字体属性——所以font属性是和color相关的——颜色值content属性——contentcontent，类似于::before伪元素的内容，用于填充序号的内容text-combine-upright(en-US),unicode-bidianddirectionproperties--写作相关的一些应用探索document::marker的方向比如我们经常在标题前面看到一些Decoration：或者，我们也可以用emoji表情：都非常适合用::marker来展示。请注意，您需要在非列表项元素上使用显示：list-item:

Loremipsumdolorsitamet

Loremipsumdolorsitamet

h1{display:list-item;padding-left:8px;}h1::marker{content:'▍';}h1:nth-child(2)::marker{content:'😅';}CodePen演示--::marker示例[3]::marker可以动态更改。有趣的是，::marker仍然可以动态变化。使用它，您可以轻松创建一些有趣的悬停效果。比如你没有被选中，你不开心，但是你被选中了，你就开心了：li{color:#000;transition:.2sall;}li:hover{color:#ff6000;}li::marker{内容：'😩';}li:hover::marker{content:'😁';}CodePenDemo--::markerexample[4]与计数器一起使用。可以看出::marker伪元素和::before、::after伪元素非常相似，它们都有一个content属性。在内容上，其实可以应用一些简单的字符串相加操作。利用这个，我们可以配合CSS计数器counter-reset和counter-increment实现对::marker元素添加序号的操作。如果你不太了解反增量，你可以去这里：MDN--counter-increment[5]假设我们有以下HTML：

Loremipsumdolorsitamet.

Loremipsumdolorsitametconsecteturadipisicingelit.

Itaquesequieaqueearumlaboriosam.

Rationeculpareprehenderitbeataequaeratvoluptatibus,debitisiusto?

Laudantiumsapientecommodiquidemexecturi!

Loremipsumdolorsitametconsecteturadipisicingelit.

我们使用::实现反增量markerauto和CSScounter在h3前面带有表情符号的有序计数列表：body{counter-reset:h3;}h3{counter-increment:h3;display:list-item;}h3::marker{display:list-item;content:"?"counter(h3)"";color:lightsalmon;font-weight:bold;}效果如下，实现自动给::marker元素添加序号的效果：CodePenDemo--::marker实例[6]最后本文介绍什么是::marker及其一些实际应用场景。可以看到虽然::before和::after可以实现类似的功能，但是CSS还是提供了更加语义化的label::marker，这也说明了，所以大家需要更加注意自己前端代码的语义化（HTML/CSS）。好了，本文到此结束，希望对你有所帮助：）更多精彩的CSS技术文章汇总在我的Github——iCSS[7]。参考文献[1]CSS伪元素Level3：https://drafts.c??sswg.org/css-lists-3/#marker-pseudo[2]CSS伪元素Level4：https://drafts.c??sswg。org/css-pseudo-4/#marker-pseudo[3]CodePen演示——::marker示例：https://codepen.io/Chokcoco/pen/eYvZmpW[4]CodePen演示——::marker示例：https://codepen.io/Chokcoco/pen/eYvZmpW[5]MDN--反增量：https://developer.mozilla.org/zh-CN/docs/Web/CSS/counter-increment[6]CodePenDemo--::markerexample:https://codepen.io/chriscoyier/pen/ExNWmee[7]Github--iCSS:https://github.com/chokcoco/iCSS"，您可以通过以下二维码关注。转载本文请联系iCSS前端轶事公众号。