At-rule counter-style in pseudo-element does not works - css

Question

Is it possible to use #counter-style on a pseudo-element?
I tried with an ::after, but it does not works, while in direct selector, #counter-style works. Problem with this case: if I want to move the element, it will move the whole <li> for me.
Otherwise, I'll have to add an element in my html to do what I want and that's a shame...
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

First, the problems; explanatory comments are in the code below:
/* 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>
To rectify the above problems, we remove the main component of the selector and we add an empty-string as a property-value for the declared content property:
.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>
Now that those issues are solved, the demo should...oh, it doesn't?
Well, that's because we also need to use a 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>
References:
#counter-style.
counter().
counter-increment.
counter-reset.
position.