使用 CSS 计数器自定义列表编号样式

如何使用一个经典的 CSS 技巧！ 现在在列表上获得自定义样式已经不再那么困难了，因为 CSS 计数器引入了 counter-increment 和 counter-reset，这非常适合这种情况。 我只想确保您知道它是如何工作的，并且准备了一些易于复制的示例。

假设您只想对数字进行样式设置

哦，对了，如果您担心数字对齐，您可以 使用 ::marker 应用 CSS 计数器，并让 list-style 的魔力进行自动对齐，或者 这里有一个使用子网格的想法。

以下来自 CodePen Challenges 页面的 CSS 计数器示例

关键帧动画师 前几天做了一个使用很酷的样式的 Pen。 这是一个 redux

食谱网站是寻找自定义列表样式的好地方，因为步骤列表是如此普遍的功能。 在 Mat Marquis 的网站上，他有一些有趣的样式。 我复制了他的 CSS 并将其移到这里

CSS 计数器的示例

确保查看有趣的媒体查询更改。 Lea Verou 的美食网站 也使用基于 CSS 计数器的编号。

这是一个来自 Jonathan Snook 的有趣的 CSS 计数器演示，它具有“时间线”外观并使用自定义计数器来标记每个部分

更多信息

• 使用 CSS 计数器和 CSS 网格进行计数
• 带样式的编号
• CSS 计数器的趣味时光
• 在 CSS 中设置列表标记的样式
• counter-increment、counter-reset 和 ::marker 在年鉴中
• 使用 CSS 计数器自动编号
• 使用 Unicode 符号的排序列表