如何让CSS伪元素::before的content实现计数器算术运算？

要实现伪元素content显示section * 10 + 1990的计算结果，CSS原生计数器本身不支持直接算术运算，但可以通过双计数器联动的方式实现，具体步骤如下：

实现思路 #

创建两个计数器配合工作：

• 基础计数器section：每次递增1，用于记录原始序号
• 计算计数器calculated：初始值设为1990，每次递增10，最终值刚好对应section * 10 + 1990的结果

修改后的CSS代码 #

/* 在包含所有.content-button的父容器上初始化计数器 */
.content-wrapper {
  counter-reset: section 0 calculated 1990;
}

.content-button{
    background-color: #FF7E67;
    aspect-ratio: 1/1;
    height: 75%;
}

.content-button::before {
    /* 同时递增两个计数器，section每次+1，calculated每次+10 */
    counter-increment: section 1 calculated 10;
    opacity: 70%;
    display: flex;
    height: 100%;
    width: 0%;
    background-color: #FAFAFA;
    position: relative;
    visibility: hidden;
    /* 直接使用计算后的计数器值 */
    content: counter(calculated);
}

.content-button:hover::before {
    animation-duration: 1s;
    animation-name: slide-hover;
    visibility: visible;
    animation-fill-mode: forwards;
}

/* 补充原代码缺失的hover动画逻辑 */
@keyframes slide-hover {
  to { width: 100%; }
}

关键说明 #

• 为什么CSS变量和attr()无效？因为content中的counter()是CSS特殊生成值，变量无法直接参与计数器的运算逻辑，attr()仅能读取元素的静态属性值，不支持动态计算。
• 若没有专门的父容器，可将counter-reset移至body或其他顶层容器，但建议使用独立包裹容器，避免干扰页面其他计数器。

内容的提问来源于stack exchange，提问作者Cosmin Boeriu