Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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)

like image 404
Anders Sjögren Avatar asked Sep 15 '16 14:09

Anders Sjögren


People also ask

How do you change the color of Safari on iPhone?

Change Safari Background in iPhoneGo to Start Page or Open a New Tab in the browser. Tap on the Edit button at the bottom. It shall open the Customize Start Page screen. Enable the Background Image toggle in Customize Start Page screen.


1 Answers

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; 
}
like image 113
Carter Sande Avatar answered Oct 21 '22 05:10

Carter Sande