Using non-alphanumeric characters in CSS

utility-first CSS

You can use non-standard characters like “:” in CSS class names if you escape them with a backslash.

<style>
  .text\:italic {
    font-style: italic;
  }

  .text\:uppercase {
    text-transform: uppercase;
  }
</style>

<p class="text:italic text:uppercase">
  Italic and uppercase
</p>