css content character rendering strange

Question

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:

In Chrome sometimes it displays this and pressing F5 will fix it.

In Edge it is displaying this on some computers

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

Different browsers can have their own implementations of unicode character renderings. Have you tried setting a unicode font so it doesn't use the browser default? (In regards to the Edge problem) — Felix Guo, Jun 02 '17 at 17:45
@FelixGuo I've got: font-family: Arial; font-size: 10pt; assigned on the body. I've tried copying the font and size specification directly into the li:after part of the css and it made no difference. — David, Jun 02 '17 at 17:49
Try this: https://stackoverflow.com/questions/32915485/how-to-prevent-unicode-characters-from-rendering-as-emoji-in-html-from-javascrip — Felix Guo, Jun 02 '17 at 17:55
@FelixGuo I just tried that and it didn't make a difference in Edge. After checking the character map in windows it shows 25ba as the arrow character for the font Ariel. I've tried changing it to that and it displays correctly in all browsers on my computer. Though websites list 25b6 as the arrow for html. — David, Jun 02 '17 at 18:01
To fix the Chrome issue, either [declare the character encoding inside your stylesheet](https://www.w3.org/International/questions/qa-css-charset), or don't put the character into the CSS directly, but use the proper Unicode escape, see https://stackoverflow.com/a/10393517/1427878 — CBroe, Jun 02 '17 at 18:48

David · Accepted Answer · 2017-06-14T20:19:31.333

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.

css content character rendering strange

1 Answers1