Firefox and pseudo-class first-letter

    It appeared in our team that we needed to add icons to the list items in one drop-down list depending on the type of item. The list itself is a third-party component that did not want to touch. The 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 obtained 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 information from"12 little-known facts about CSS (cont.)" , But it is obvious that Firefox understands by "nebukvami" something of their own, not consistent with the understanding of other modern browsers.

    We did not manage to solve this problem in the forehead, we had to add a span to the list items with our special characters 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

    Also popular now: