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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>