There was a need in our team for a single drop-down list to add icons to the list items, depending on the type of item. The list itself is a third-party component that did not want to touch. Icons are implemented in the form of a font, i.e. they are unicode characters.
Depending on the type of element, the
\ uXXXX icon symbol was added as an ordinary letter as a solution on the server, and beautiful squares were received on the client, since the font used for the list does not contain the codes of our icons. This is where the CSS pseudo-class
:: first-letter came to the rescue.
This instruction is well described in
"Pseudo-class: first-letter" and in
"12 little-known facts about CSS (continued)" .
Everything works like a clock: we set the class, we set the pseudo-class with our font (font-family), we start it - it works in Chrome. Checklist in IE11 and Edge - works. But in Firefox - does not work. After all the tambourine dances (clearing history and cache), we are finally convinced that Firefox is definitely not working.
An online search showed (
https://css-tricks.com/forums/topic/first-letter-firefox-problem ) that Firefox is trying to determine if a character is a letter to use a pseudo-class, and if it thinks differently, then the pseudo-class is just ignored. This generally corresponds to the information from the
“12 Little Known Facts about CSS (Continued)” , but it is obvious that Firefox means something different from “nebukvami” that does not correspond to the understanding of other modern browsers.
We could not solve this problem in the forehead, we had to add a
span to the list items with our special symbols in the client.
The conclusion, unfortunately, is such that, at the moment, the
first-letter pseudo
- class cannot be used to solve the problem of displaying a custom character in a string.
UPD Thank you
dartraiden - this problem is known in Mozilla -
official bug