如何反转 CSS 自定义计数器

我需要一个博客文章编号列表，从最后一个/最大的开始，然后依次递减。 就像这样

5. Post Title
4. Post Title
3. Post Title
2. Post Title
1. Post Title

但以上只是文本。 我想用语义化的 <ol> 元素来实现。

简单的方法

这可以使用 HTML 的 reversed 属性在 <ol> 上实现。

<ol reversed>
  <li>This</li>
  <li>List</li>
  <li>Will Be</li>
  <li>Numbered In</li>
  <li>Reverse</li>
</ol>

对于大多数人来说，这已经足够了。 完工了。

但我需要 自定义样式 用于计数器。

需要知道的是，自定义列表编号样式可以使用 ::marker 伪元素 来完成，但 Chrome 尚未支持（尽管我听说很快就会支持）。

因为我想要完全跨浏览器兼容的自定义编号样式，所以我使用了自定义计数器。

添加和设置自定义计数器样式

要使有序列表的计数器样式与列表的其余部分不同，需要禁用默认计数器，并使用 CSS 计数器 创建和显示我们自己的计数器。 Chris 之前分享了一些食谱，值得一看。

假设我们有以下 HTML

<ol class="fancy-numbered">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

…我们首先需要禁用所有有序列表附带的默认计数器，方法是将 CSS 属性 list-style-type 设置为 none，如下所示

ol.fancy-numbered {
  list-style-type: none;
}

这将删除所有默认编号。接下来，我们在 CSS 中创建一个计数器来跟踪列表中项目的数量。

ol.fancy-numbered {
  list-style-type: none;
  counter-reset: a;
}

这给了我们一个名为“a”的计数器，但可以根据需要随意命名。让我们使用列表项 (<li>) 上的 ::before 伪元素 来显示我们的计数器。

ol.fancy-numbered li::before {
  content: counter(a)'.';
}

这会将伪元素的内容设置为我们计数器的值。现在，这将在您的列表项旁边打印 1。

我们需要告诉 CSS 计数器如何递增。

ol.fancy-numbered li::before {
  content: counter(a)'.';
  counter-increment: a;
}

“a”的起始值为零，这看起来很奇怪，但默认增量为 1，这意味着它成为实际的起始点。递增 1 恰好是默认值，但我们可以稍后更改它。

现在我们可以继续应用我们想要的任何自定义样式到计数器，因为计数器只是一个文本伪元素，可以随意设置样式

ol.fancy-numbered li::before {
  content: counter(a)'.';
  counter-increment: a;   
  position: absolute;   
  left: 0;   
  color: blue;   
  font-size: 4rem;
}

例如，在这里，我们使计数器颜色变为蓝色并增加了字体大小。这些是我们使用默认计数器无法做到的。

反转自定义计数器

如果我们像之前一样向 <ol> 元素添加 reversed 属性，我们将观察到没有效果，因为我们禁用了默认编号。这正是此属性的作用。

<ol class="fancy-numbered" reversed>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

上面的代码对我们的自定义编号没有影响。最好还是保留它，因为我们的目的是反转列表。这可以使语义保持准确。

要反转基于计数器的编号的视觉顺序，我们需要知道列表中项目的总数，并指示计数器从该数字开始，然后从那里递减。

ol.fancy-numbered {
  counter-reset: a 4;
  list-style-type: none;
}

在这里，我们将 counter-reset 设置为 4。换句话说，我们告诉浏览器从 4 而不是 1 开始计数。我们使用 4 而不是 3，同样是因为 counter() 规则应用于列表中的第一个项目，即 0。但是，在我们倒数的情况下，4 成为我们的 0。如果我们从 3 开始递减，最终会得到 0 而不是 1。

接下来，我们将 counter-increment 规则更改为递减 1 而不是递增，方法是将其设置为负整数。

ol.fancy-numbered li:before {
  content: counter(a)'.';
  counter-increment: a -1;
  position: absolute;   
  left: 0;   
  color: blue;   
  font-size: 4rem;
}

就是这样！现在您可以使用它来创建诸如步数追踪器之类的东西了

或者如何创建一个时间线

也许是一个 商业计划？