当需要为列表元素自动生成标号并使标号和内容一起缩进时，CSS 伪元素和计数器功能提供了一种优雅的解决方案。通过正确地设置样式，我们可以实现这一效果，让网页内容更加清晰和美观。
在网页设计中，我们常常需要为有序列表添加标号，以便读者更好地理解和导航内容。这时，CSS 计数器就能派上用场。计数器允许我们在网页元素中自动生成数字标号，从而减轻手动添加标号的繁琐工作。
<ol class="custom-list"> <li><strong>view</strong>：声明为 <code>view</code> 的函数表示它不会修改合约状态，只是查询数据。这些函数可以被其他合约或外部账户以只读方式调用，不会创建交易。</li> <li><strong>pure</strong>：声明为 <code>pure</code> 的函数表示它不会修改合约状态，也不会访问合约的任何存储变量。它只进行纯粹的计算操作，通常用于执行数学计算或数据转换。同样，<code>pure</code> 函数也不会创建交易。</li> <li><strong>payable</strong>：声明为 <code>payable</code> 的函数表示它可以接收以太币或调用者向合约发送的其他代币。这使得该函数能够接收资金，创建一个交易，并更新合约状态。通常用于实现接收资金的逻辑。</li> <li><strong>nonpayable</strong>：这是默认的状态，表示函数不接受以太币或其他代币。<code>nonpayable</code> 函数在被调用时不会创建交易。</li> </ol>
以上 HTML 代码为一个自定义的有序列表，每个列表项包含不同的说明。我们希望实现自动生成标号的效果，并让标号和内容一起缩进。
使用伪元素和计数器实现自动生成标号和缩进效果
ol{ margin:0; padding:0; } /* 自定义有序列表样式 */ ol.custom-list { list-style-type: none; /* 隐藏默认标号 */ text-indent: 2em; /* 缩进2个字符 */ counter-reset: custom-counter; /* 重置计数器 */ } ol.custom-list li::before { content: counter(custom-counter) "."; /* 使用计数器，添加点号和空格 */ counter-increment: custom-counter; /* 增加计数器 */ }
在上述 CSS 代码中，我们首先定义了自定义有序列表的样式。通过 list-style-type: none; 我们隐藏了默认的标号。使用 text-indent: 2em; 缩进2个字符，使标号和内容一起缩进。
然后，我们使用了 counter-reset: custom-counter; 重置计数器，并通过 counter-increment: custom-counter; 来递增计数器的值。最后，通过伪元素 li::before，我们使用计数器生成标号，并添加点号和空格。
通过这样的方式，我们成功地实现了自动生成标号和内容缩进的效果，让有序列表更加清晰和易读。
CSS 计数器功能是一种强大的工具，可以为网页设计带来更多的灵活性和美观性。通过合理运用伪元素和计数器，我们可以在不增加冗余代码的情况下实现各种自动化效果，提升用户体验。