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

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 .