Safari on iPhone is unable to style the color of pseudo element :after with content \2714 but it works for \2713

Question

Does anyone know why this is happening?

I want both checkmarks to be white, but the :after element is black (however it seems to have a vertical white to black gradient).

It works in Chrome and Safari on a MacBook.

Open this example page in Safari on an iPhone to see the issue:

http://output.jsbin.com/lerudihiho/

(and here is the code: http://jsbin.com/ponamazoso/edit?html,css,output)

Answer 1

The fix here is similar to when you're using U+2714 in HTML: you need to add a U+FE0E VARIATION SELECTOR-15 directly after the check mark to tell iOS to draw it as an outline rather than a bitmap. Here's what this looks like in CSS:

body::after {
  content: "\2714\fe0e";
  color: red; 
}