Pass css ::after content as specific word from class name

November 25, 2021

I want to pass CSS ::after content as a specific word from its class element.

If class names are "language-css", "language-html", etc, in this case, I want to pass the content as the word after the "-".

code::before {
  content: attr(class);
}

<code class="language-css"> some code here </code>
<code class="language-html"> some code here </code>
<code class="language-javascript"> some code here </code>

I know this returns the whole text from the CSS class, does CSS support any split function as JavaScript does?

>Solution :

In this particular case, you can hack is with some negative text-indent if the prefix is always the same. The code element is using a monospace font so it’s easy using ch unit

code::before {
  content: attr(class);
  display:inline-block;
  text-indent:-9ch; /* adjust this based on your real case */
  clip-path:inset(0); /* hide the overflow */
}

<code class="language-css"> some code here </code>
<code class="language-html"> some code here </code>
<code class="language-javascript"> some code here </code>