Change text on mobile emails with the :after CSS selector

This is a small little email trick that I applied with success in the emails I code. Sometimes you are being asked to display different text on mobile and to be honest it is kind of neat to be able to do that. Looks like magic and it's quite simple.

It's not unknown for CSS3 to work on modern devices like smartphones. So today we will use the power of that to change "click" to "tap" on mobile using the :after CSS selector. Awesome!

Out task is to hide one word on mobile and replace it with a different one. To hide we will code like this:

span[class="hide'] {display:none !important;}

To show the new word we will do this:

span[class="show']:after {content: "Tap";}

This is the full code:

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Untitled Document</title>
      <style type="text/css">   
         @media screen and (max-width:600px) {
         span[class=hide] {display: none !important;}
         span[class=show]:after {content:"Tap";}
         }
      </style>
   </head>
   <body>
      <br>   
      <table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
         <tbody>
            <tr>
               <td style="background:red; padding:20px; text-align: center; text-transform: uppercase; color:#ffffff"><a href="http://google.com" style="color:#fffffe; text-decoration: none; font-weight:bold; font-family: Arial;"><span class="show"><span class="hide">Click</span></span> here</a></td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

There is a catch though. While this works in all native email clients (the email you set in the settings of the phone), it won't work in Gmail. Curious enough it works just fine in Outlook mobile app as well:

What you see in these screenshots is, Gmail app on iPhone 6 in iOS 10 on the left. In the middle is the test in Outlook on a iPhone 7 running on iOS 11. And finally, on the right is the default native email client on an iPhoneX running the latest iOS 11.

As you can see, We have the word "tap" in Outlook and native email but not in Gmail. What is interesting is that while Gmail displays responsive emails now, it won't recognize a CSS3 selector like :after. I did some digging and aparently Gmail only supports :hover from the CSS selectors and pseudo-classes.

This is all for now. Happy email coding! Your friend, the email snob.