如何逆转CSS自定义计数器

我需要一个博客文章编号列表，从最后一个/最大的数字开始，然后递减。例如：

<code>5. 文章标题
4. 文章标题
3. 文章标题
2. 文章标题
1. 文章标题</code>

但这只是文本。我想用语义化的 <ol></ol> 元素来实现这一点。

简单方法

可以使用 HTML 的 reversed 属性在 <ol></ol> 元素上实现：

<ol reversed="">
  <li>这个</li>
  <li>列表</li>
  <li>将会</li>
  <li>按倒序</li>
  <li>编号</li>
</ol>

对大多数人来说，这就足够了。任务完成。

但是我需要自定义样式的计数器。

需要注意的是，可以使用 ::marker 伪元素来实现自定义列表编号样式，但这还不受 Chrome 支持（尽管我听说很快就会支持）。

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

添加和设置自定义计数器

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

假设我们有以下 HTML：

<ol>
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 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”的计数器，但可以随意命名。让我们使用列表项上的 ::before 伪元素来显示我们的计数器（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></ol> 元素添加 reversed 属性，我们将观察到没有效果，因为我们禁用了默认编号。这正是此属性的作用。

<ol reversed="">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 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;
}

就是这样！现在，您可以随意使用它，例如步骤跟踪器：

或者时间轴：

或者商业计划？

以上是如何逆转CSS自定义计数器的详细内容。更多信息请关注PHP中文网其他相关文章！