-2

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>

Improve this question
14
  • 1
    Where's your attempted (relevant) "minimal reproducible example" code, @counter-style works perfectly well (Firefox 105, Chrome 106 on Ubuntu 22.04). If you're using Safari then you appear to be out of luck, but other browsers (desktop, I've not checked mobile compatibility) seem to work with it. Commented Sep 28, 2022 at 12:20
  • I use Firefox 104 and in pseudo-element ::after, it's doesnt works. I thought it wasn't necessary in this case, because I seem to have read that if it's not necessary, it's not useful to put an example of the code. Commented Sep 28, 2022 at 12:34
  • 1
    Thank you for adding CSS, but because we can't tell what you're doing from broken code, you also need to add the (relevant) HTML. Also, for those of us not using preprocessors (which abstracts away and potentially complicates your understanding of native CSS), could you post the compiled CSS instead of the...Less? SASS? Commented Sep 28, 2022 at 12:39
  • 2
    What you have currently shown us, is not even valid CSS - you can not have selectors that start with >. Please povide a proper minimal reproducible example when you are asking questions like this. Commented Sep 28, 2022 at 12:40
  • 1
    I'm forget to translate it sorry Commented Sep 28, 2022 at 12:42

1 Answer 1

Reset to default
0

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:

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Thank you very much. I will look into your answer. I'm sorry for all these ups and downs, I'll try to do better, to be more careful. Thank you very much.
No problem; as much as I'm sure neither of us enjoyed my repeated asking for more information, more code, a different type of code... we all start out new to the site, and you were patient enough to deal with the constant requests. So, thank you for your patience, welcome to the site, and I hope your next interaction(s) go more smoothly. :)
Very dictatal. I cannot vote for your answer, being new, but it is very well explained, thank you, I will implement it.
You're very welcome indeed; while you can't vote for it, if you feel it's answered your question and solved your problem, you are able to accept the answer by clicking on the check-mark besides the answer. It's not obligatory to do so, and you may want to wait a day or two to see if a better answer comes along.
Thank you, I have validated the answer with joy. It will be difficult to get such a qualitative answer. I can confirm that it works very well in my code ;-)
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.