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

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 >
  <h2>Fonctionnement</h2>
  <ol>
    <li>Choisissez un restaurant</li>
    <li>Composez votre menu</li>
    <li>Dégustez au restaurant</li>
  </ol>
</section>

CodePudding user response：

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 >
  <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 >
  <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 >
  <h2>Fonctionnement</h2>
  <ol>
    <li>Choisissez un restaurant</li>
    <li>Composez votre menu</li>
    <li>Dégustez au restaurant</li>
  </ol>
</section>

References: