csscss-selectorspseudo-element

::first-letter does not count `@` and apply css in 2 letters

while playing around ::first-letter

when string start with @ then it color 2 letters.

 footer {
 color: mediumseagreen;
 font-size: 2rem;
 font-style: italic;
}
footer::first-letter { color: purple; }
<footer>@xyz</footer>
<footer>xyz</footer>

is this right behavior?

Solution

  • Per MDN,

    Punctuation that precedes or immediately follows the first letter is included in the match. Punctuation includes any Unicode character defined in the open (Ps), close (Pe), initial quote (Pi), final quote (Pf), and other punctuation (Po) classes.

    The @ character is part of the "Other Punctuation" category, so it is correct for @x to be highlighted in your first example.