Why pseudo element looks different on different devices?

Asked Feb 08 '20 at 10:29

Active Feb 08 '20 at 10:29

Viewed 67 times

I used this code in my CSS file that included to my page, but some times appear in different appearance. For example, color is white, but in some of the android devices render in red!

input[type="checkbox"]:checked::after{
    position: relative !important;
    content: '✔' !important;
    display: inline-block !important;
    font-size: 19px !important;
    margin: -9px 1px !important;
    color: #fff !important;
    vertical-align: top !important;
    font-weight: normal !important;
    font-family: Yekan !important;
    z-index: 0;
}

What is the problem?

asked Feb 08 '20 at 10:29

Amir

the character is the problem, the font isn't the same in all the devices – Temani Afif Feb 08 '20 at 10:30
No, I added this font to my CSS and I checked with Arial font – Amir Feb 08 '20 at 10:31
maybe the font isn't loading – Temani Afif Feb 08 '20 at 10:32
I use this font in another section and it's work well – Amir Feb 08 '20 at 10:33
What is the relation between font and color whether I used "white !important" in my css – Amir Feb 08 '20 at 10:38
some unicde character cannot be styled by color and this depend on the OS and the font, related: https://stackoverflow.com/q/58450687/8620333 – Temani Afif Feb 08 '20 at 10:40
In that case, try adding `\FE0E` to the content. – Mr Lister Feb 08 '20 at 19:01

Why pseudo element looks different on different devices?

0 Answers0