使用表情符号来设置列表项目符号的样式

HTML 无序列表的项目符号样式<ul>有限。使用 CSS，可以将它们更改为更有趣的样式，例如表情符号！🎉👯‍♂️✨

在这篇文章中，我将向您展示两种替代它们的方法： ，它简洁而灵活（但您的浏览器可能不支持它），以及使用伪元素@counter-style的更久经考验的技术。::before

我们将从以下内容转换一个带有无样式计数器的无序列表：

对此：

注意：以下代码示例是用 Sass 编写的，利用嵌套，以保持其简短。

方法 1：@counter-style@ 规则

CSS @规则是指示 CSS 如何表现的语句，例如@import、@font-face或@media。

@counter-style提出@ 规则是为了给 HTML 列表中现有的项目符号样式集提供更多选项和功能。

@counter-style它是一个三级提案，处于候选推荐阶段，这意味着该规范足够稳定，可以被浏览器实现。然而，截至 2019 年 4 月，它仅受 Firefox 支持（caniuse 统计数据@counter-style）。本文中的示例输出以图片形式提供，但所有示例的代码均可在页面底部的 CodePen中找到。

反式规则示例

要使用计数器样式，请编写一条规则，然后将它声明为或标签上list-style-typeCSS 属性的值。计数器样式规则的语法包含多个可选描述符，如MDN 文档页面中所述。MDN 还提供了不同计数器样式变体的交互式演示（建议使用 Firefox 等受支持的浏览器进行查看）。<ul><ol>

为了用表情符号替换项目符号，我们需要为“系统”、“符号”和“后缀”描述符提供选项。选择“循环”系统，并提供所需表情符号的 Unicode 码位。请注意，您需要使用 Unicode 码位来表示表情符号，而不仅仅是字符，例如，使用“\1F431”而不是🐱。完整列表请访问Unicode 网站。将“后缀”设置为“ ”表示计数器后不会出现其他字符，例如句点。

“symbols”描述符可以接受一组以空格分隔的符号。结合“cyclic”系统选项，这意味着我们最终的要点设计将循环显示所有提供的符号。

@counter-style repeating-emoji {
  system: cyclic;
  symbols: "\1F431" "\1F436" "\1F984"; // unicode code point
  suffix: " ";
}

// Add this class to the ul or ol element
.repeating-counter-rule {
  list-style-type: repeating-emoji;
}

方法二：::before伪元素

此方法可用于将标准光盘替换为图像，而不仅仅是表情符号。缺点是它不具备 的灵活性@counter-style。

list-style: none首先在父列表元素上设置，<ul>或<ol>，然后调整列表项元素的填充和边距<li>。使用伪元素添加用于项目符号的图标::before。

要用相同的表情符号替换默认的光盘，可以使用以下代码，其中将single-before类添加到<ul>元素中：

.single-before {
  list-style: none;
  padding: 0;
  margin: 0;

  li {
    padding-left: 1rem;
    text-indent: -0.7rem;
  }

  li::before {
    content: "🐻 ";
  }
}

为了复制上面反样式示例中三个表情符号项目符号的重复模式，我们需要使用:nth-child伪类。例如，将以下.repeating-before类添加到<ul>：

.repeating-before {
  list-style: none;
  padding: 0;
  margin: 0;

  li {
    padding-left: 1rem;
    text-indent: -0.7rem;
  }

  li:nth-child(3n+1)::before {
    content: "🐱 ";
  }

  li:nth-child(3n+2)::before {
    content: "🐶 ";
  }

  li:nth-child(3n)::before {
    content: "🦄 ";
  }
}

虽然这种方法最初很简单，但根据要实现的表情符号模式，可能会变得更加复杂。不过，这项技术的优势在于它能够跨浏览器得到良好的支持。

结论

在设置列表计数器的样式时，@规则@counter-style提供了很大的灵活性，但由于浏览器支持有限，它不适用于大多数生产环境的网站。使用伪元素虽然可靠，但对于更复杂的布局来说却很繁琐。但是，如果列表项目符号的样式是可选的设计特性，而不是页面设计的关键部分，那么可以考虑@counter-style与@supports@ 规则结合使用，并提供可接受的后备设计，或许可以使用伪元素。

Emoji 项目符号 CodePen 示例