在规则计数器上，伪元素中的样式不起作用

Question

是否可以在伪元素上使用@counter-style？我尝试使用::after，但它不起作用，而在直接选择器中，@counter-style起作用。这种情况下的问题：如果我想移动元素，它会为我移动整个<li>。

否则，我将不得不在我的html中添加一个元素来做我想做的事情，这太遗憾了。。。

main .works ol li::after {
list-style: icone;
position: absolute;
}
@counter-style icone {
system: additive;
additive-symbols: V 5, IV 4, I 1;
}

<section class="works">
<h2>Fonctionnement</h2>
<ol>
<li>Choisissez un restaurant</li>
<li>Composez votre menu</li>
<li>Dégustez au restaurant</li>
</ol>
</section>

Answer 1

首先，问题；解释性注释在下面的代码中：

/* there is no <main> element in the posted
code, therefore the selector will fail: */
main .works ol li::after {
/* there is no defined content property,
this is mandatory in order for a
pseudo-element to be rendered to the
screen, even if only an empty-string */
list-style: icone;
position: absolute;
}
@counter-style icone {
system: additive;
additive-symbols: V 5, IV 4, I 1;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/>
<section class="works">
<h2>Fonctionnement</h2>
<ol>
<li>Choisissez un restaurant</li>
<li>Composez votre menu</li>
<li>Dégustez au restaurant</li>
</ol>
</section>

为了纠正上述问题，我们删除了选择器的main组件，并添加了一个空字符串作为声明的content属性的属性值：

.works ol li::after {
content: '';
list-style: icone;
position: absolute;
}
@counter-style icone {
system: additive;
additive-symbols: V 5, IV 4, I 1;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
<section class="works">
<h2>Fonctionnement</h2>
<ol>
<li>Choisissez un restaurant</li>
<li>Composez votre menu</li>
<li>Dégustez au restaurant</li>
</ol>
</section>

既然这些问题已经解决，演示应该。。。哦，不是吗？

那是因为我们还需要使用counter():

@counter-style icone {
system: additive;
additive-symbols: V 5, IV 4, I 1;
}
/* we specify that the <ol> element(s) should serve to
reset the counter we're using: */
ol {
counter-reset: listCounter;
inline-size: 15em;
}
li {
position: relative;
}
.works ol li::after {
/* here we define the counter that we're using 'listCounter',
and we define the list-style that we wish to use: 'icone'*/
content: counter(listCounter, icone);
/* we now specify that the pseudo-element should increment
that counter: */
counter-increment: listCounter;
position: absolute;
/* positioning against the right edge of the nearest non-static
ancestor (the <li> in this example): */
right: 0;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
<section class="works">
<h2>Fonctionnement</h2>
<ol>
<li>Choisissez un restaurant</li>
<li>Composez votre menu</li>
<li>Dégustez au restaurant</li>
</ol>
</section>

参考文献：

• @counter-style
• counter()
• CCD_ 10
• CCD_ 11
• position