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>

Where's your attempted (relevant) "*[mcve]*" 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. — David Thomas, Sep 28 '22 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. — kevgiraultdev, Sep 28 '22 at 12:34
"*[You] read that if it's not necessary, it's not useful to put an example of the code.*"? Okay, that makes sense. But what about this question makes you think that code isn't necessary? Thank you for responding, but please post the (relevant) code, to be clear: it is necessary. — David Thomas, Sep 28 '22 at 12:35
Yes I did, I went to edit after I replied to you. Thank you very much. — kevgiraultdev, Sep 28 '22 at 12:39
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? — David Thomas, Sep 28 '22 at 12:39
What you have currently shown us, is not even valid CSS - you can not have selectors that _start with_ `>`. Please povide a _proper_ [mre] when you are asking questions like this. — CBroe, Sep 28 '22 at 12:40
Okay. Actually, I've done some other tests since then, when I asked my question, the code was different, I'll find it again. à Note that I took it out of the nesting, but I'll format it better. — kevgiraultdev, Sep 28 '22 at 12:41
I am genuinely so sorry for this; I promise I'm not trying to drive you away - and we *do* genuinely enjoy solving coding problems - but English is the required language on [SO], though there are various other language-versions, such as [ja.so], [es.so], [pt.so] and [ru.so], I don't think there's a French version so far. — David Thomas, Sep 28 '22 at 12:43
In fact, each answer, I run it through an online translator before but I forgot to click on copy... — kevgiraultdev, Sep 28 '22 at 12:50
This is good. Don't look at the many ascending selectors, I'll move the SASS code portions into their files once the problem is fixed. — kevgiraultdev, Sep 28 '22 at 12:59
I added a link to font-awesome 6, but that may not be the right family (or link), and there's no CSS as yet to bind the linked font to the named `font awesome 6 free` font-family. Could you add, or correct, those parts of the Snippet? — David Thomas, Sep 28 '22 at 13:01
It's OK, I put the one I have on. It works perfectly for other icons. — kevgiraultdev, Sep 28 '22 at 13:06
In fact, FontAwesome has no business being there. Because I had tested, as you can see in the code, even with additive-symbol to see, and FA it didn't work but simple additive symbol, yes if is in selector, not pseudo-element. In fact I have two problems... the @ rule doesn't work on a ::after, and also fontawesome doesn't work on at-rule. These are two separate issues, which is why I asked another question. — kevgiraultdev, Sep 28 '22 at 13:12

score 0 · Accepted Answer · answered Sep 28 '22 at 13:23

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:

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. — kevgiraultdev, Sep 28 '22 at 13:27
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. :) — David Thomas, Sep 28 '22 at 13:32
Very dictatal. I cannot vote for your answer, being new, but it is very well explained, thank you, I will implement it. — kevgiraultdev, Sep 28 '22 at 13:34
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. — David Thomas, Sep 28 '22 at 13:42
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 ;-) — kevgiraultdev, Sep 28 '22 at 14:45
Note: I have discovered today that the w3c css validator issues an error : ```Sorry! We found the following errors (1) URI : TextArea 20 Value Error : content icone is not a content value : counter(listCounter,icone) ``` So you probably have to go through an html element. — kevgiraultdev, Oct 13 '22 at 07:42

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

1 Answers1