CODEWITHSUNDEEP
htmlcsspseudo-element
David
David

Reputation: 3763

css content character rendering strange

I'm using the :after pseudo-element to add a character beside each item in a list. The CSS I'm currently using is:

li:after {
      display: inline-block;
      content: '\25b6';
      color: #dc313a;
      padding-right: 16px;
      padding-left: 6px;
      font-weight: normal;
}

It displays fine in Chrome (most of the time), Firefox, and IE11. This is what it should add to the end of each li element: enter image description here

In Chrome sometimes it displays this enter image description here and pressing F5 will fix it.

In Edge it is displaying this on some computers enter image description here

Does anyone know why I sometimes get those characters in Chrome and why Edge is displaying something completely different on some computers?

Upvotes: 7

Views: 2154

Answers (1)

David
David

Reputation: 3763

Despite what many website say character 25b6 doesn't work the same in all browsers. After looking in Character Map in Windows for the Ariel font I found that 25ba also gives the same character (well close enough). After updating my css with 25ba instead of 25b6 it shows correctly in all browsers I can test against.

It appears that with 25b6 edge just changes it to an emoticon and even adding fe0e after it doesn't stop edge from changing it.

Upvotes: 1

Related Questions