Using Pseudo Elements to Progressively Enhance Your Emails

What are Pseudo Elements?

In this post, we’ll be going through how we can use pseudo elements to progressively enhance our emails but, first, we’ll need to know what a pseudo element is. Pseudo elements are pieces of CSS code that are used to style specific parts of an HTML element.

They follow this basic syntax:

selector::pseudoelement {
    property: value;
}

We are going to focus on the four main pseudo elements available to us, we’ll be using each of these in this blog post:

  • first-letter
  • first-line
  • before
  • after

Where do Pseudo Elements work?

Before we go into some ideas of how we can enhance emails using these elements, we should look at where they will and won’t work. It’s important to always cross reference the support table with your own subscriber base and make sure your subscribers will see the effort you’re putting in.

Pseudo Element Support

Email Client Support
Apple Mail
Lotus Notes
Outlook 2003
Outlook 2007
Outlook 2010
Outlook 2011
Outlook 2013
Outlook 2016
Outlook 2013 Mac
Thunderbird
Android 4.4
Android 5.1
Android Gmail
Gmail App iOS
iPad
iPhone iOS
AOL
Gmail
Google Apps
Office 365
Outlook.com
Yahoo!

Beautiful buttons using ::after

We’re going to cover how to use pseudo elements to add a bit of extra interactivity to your buttons. Let’s start with the basic button code:

Read more

This will create a nice looking static button.

Now, let’s add our hover states:

.button-td:hover,
.button-a:hover {
    transition: all 300ms ease-in;
    background: #333333 !important;
    border-color: #333333 !important;
}

If you don’t know what’s going on here; we’re just telling the button when we hover over it, we want the background and border colour to change to #333333 with a transition time of 300 milliseconds. This will create this hover effect:

Time for the final step. We’re going to use the ::after element to add a final piece of interactivity.

.button-a:hover::after {
    content: " >>";
    font-size:13px;
    text-decoration: none;
    color:#ffffff;
}

Don’t let the code scare you, it’s very simple! We’re telling the button here that when we hover on it, we want to add content after the current link. We also need to style it.

This is the final outcome:

Beautiful typography with ::first-line

Now, let’s take a look at what we can do with the ::first-line element. If it wasn’t obvious, this element allows us to target only the first line of some text. This can be hugely advantageous as it will automatically adjust to the width of the first-line. Not quite sure what that means? All will be explained.

This is the effect we’re going to make.

For comparison, here is how it renders on mobile.

To achieve this, simply wrap your text in an element that can be targeted with pseudo-elements; in this case, we’ve wrapped it in a div with the class typography. We’ll then use this CSS to target the first line:

.typography::first-line {
    font-family:Georgia, serif;
    font-style:italic;
    font-size:24px;
    line-height:30px;
}

Hopefully now you can see the big advantage to this code. We have no need to use media queries to adjust it on mobile. All we’re doing here is targeting the first line of the div and applying these font styles that differentiate from the normal body copy.

Capture feedback in a fun way with ::after

Another fun idea to implement in your emails which we’ve seen a recent surge in is capturing feedback within the email. We’re going to do this in a fun way.

First off, we’re going to add three smileys; one happy, one indifferent, and one sad.

Please note; this is only the email code to make this work. You’ll still need a page to display a thank you message for capturing feedback. You’ll also need a method for tracking how often each of these options are clicked. My suggestion would be using a different tracked link for each reaction.

Next, we’re going to add some hover states to the smileys like so:

.icon1:hover::after{
  content: "Love it!";
}
.icon2:hover::after{
  content: "Meh!";
}
.icon3:hover::after{
  content: "Hate it!";
}

Similar to the code we used for the button above, we’re simply telling the icons that when a user hovers over them we want to add the content we’ve specified after the icons themselves. In this case, we’ve used descriptions of the smileys to remove any confusion.

The finished product looks like this;

As you can see, this is by no means completely polished! It’s more of a base to work on to get your creative juices flowing.

Adding consistent styling with ::first-letter

This one is a little more simple, we don’t rely on any special hover states. We’re simply adding a little something to give our subscribers a bit more a typographic look to the emails. This is what we’ll be creating.

Let’s dive straight into the code. Like I said, it’s super simple!

p::first-letter {
    font-family:Courier, serif;
    color:#007700;
    font-weight:bold;
    font-size:24px;
}

What we’re doing here is targeting every paragraph tag in the code. We’re telling it that we want the first letter of each paragraph to have the stylings we’ve assigned which, in this case, we’re changing to a serif font to add contrast with our sans-serif paragraphs. We’re also making it larger, colouring it and making it bold.

Final thoughts

I’d like to remind you again to check the support table above. Although this technique of coding has a lot of power, it isn’t supported in every client. Be careful to use it in a way that allows clients that don’t support Pseudo Elements to still render a fantastic email.

As with any new email development techniques you want to add to your toolbox, it’s extremely important to test. That’s where Email on Acid has you covered. We offer everything from email testing to email analytics, as well as a whole bunch of handy resources like coding tips and free templates. Sign up today and take your email game to the next level!

Leave a Reply