如何使用 CSS 反转自定义计数器？

CSS 中的计数器基本上是可用于编号的变量，CSS 计数器的值可以通过 CSS 规则递增。按照这篇文章，您将了解使用 CSS 反转自定义计数器的 2 种方法。

我们将使用以下两种方法来反转计数器：

• 在方法 1 中，我们将使用如何使用 HTML 中的reverse 属性反转简单计数器。
• 在方法 2 中，我们将最终解决关于如何使用 CSS 反转自定义计数器的问题陈述。

方法 1：在 HTML 中使用反向属性反向计数器。

首先，我们假设我们知道列表中的项目总数，因为我们将指示计数器从项目总数开始编号，并不断减一直到 0（零），通过这个我们可以实现倒序编号。

注意： HTML

反转属性是一个布尔属性，用于按降序（9, 8, 7, 6 …..）而不是升序（1, 2, 3 ….）对列表进行排序。

句法：

   
 Content... 
   
 Content... 
   ...
   
 Content... 

下面是上述方法的实现。

例子：

HTML

   

    

        GeeksforGeeks
    
   
    

        Below list is numbered in Reverse 
        order By using reverse property
    
  
   
    

        
Interview Preparation
        
Content Writing
        
SDE at GeeksforGeeks
    

   

输出：



上面的例子不是自定义计数器。它是反转计数器的内置方法。按照以下方法自定义计数器的顺序。

方法 2：使用自定义计数器反转计数器。以下是有关如何使用自定义计数器的分步实施。

步骤 1：首先需要禁用默认计数器，以便不显示标记，这可以通过将 CSS 属性 list-style-type 设置为 none 来完成。

第 2 步：我们需要在 CSS 中创建一个计数器，以使用 counter-reset 创建或重置计数器并设置 counter-reset =（列表中元素的总数 + 1）来跟踪列表中的项目数。添加一个元素是由于 counter() 规则。

counter-reset: myCounter (total number of element in the list + 1);

第 3 步：在用于以特定顺序显示内容的内容中使用 counter()函数。

content: counter(myCounter);

第 4 步：最后，增加 CSS 计数器。您需要添加用于递增/递减计数器值的counter-increment属性并设置 counter-increment = -1 ，用于将计数器减少 1。实际上 counter-increment 属性将整数增加 1，但是在这里，我们将更改此属性以将整数减 1。

counter-increment: myCounter -1;

示例 2：

HTML

   

    

   

    
GeeksforGeeks
   
    

        Below list is numbered in Reverse 
        order By Using Custom Counter.
    
  
   
    

        
Data Structure
        
Web Development
        
Competitive Programming
        
DBMS
    

   

输出：