Pseudo Elements in emails

Using Pseudo-Elements to Progressively Enhance Your Emails

7

This post was updated on January 21st, 2020. It was originally published on December 9th, 2016.

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;
}
Example:

p::firstline {
font-weight: bold;
}

In this blog post, we’re going to focus on three pseudo-elements:

  • after
  • first-line
  • first-letter

Where do pseudo-elements work?

Before we explore how we can enhance emails using pseudo-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 to make sure your subscribers will see the effort you’re putting in.

::after ::first-line ::first-letter
Lotus Notes
Outlook Desktop
Outlook Mac
Thunderbird
Samsung Native Mail app
Gmail App iOS/Android
Applemail
iOS Mail
AOL
Gmail
Google Apps
Outlook.com/Office 365
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:

<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto">
    <tr>
        <td style="border-radius: 3px; background: #666666; text-align: center;" class="button-td">
            <a href="http://www.google.com" style="background: #666666; border: 15px solid #666666; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
                <span style="color:#ffffff;" class="button-link">Read more</span>
            </a>
        </td>
    </tr>
</table>

This will create a nice looking static button.

Read More button without pseudo elements

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 telling the button—when we hover over it—we want the background and border color to change to #333333 with a transition time of 300 milliseconds. This will create this hover effect:

Gif of broken Read More button

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 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:

Interactive Read More button using pseudo elements

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.

Enlarged first line of body text

For comparison, here is how it renders on mobile.

Mobile rendering of enlarged first line of body text

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 way to implement pseudo-elements into 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.

Three faces, one happy, one neutral 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:

Interactive smilies using the after pseudo element

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 simpler, 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:

Enlarged first letter of body text

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, coloring it, and making it bold.

Final thoughts

I’d like to remind you again to check the support table above. Although this coding technique 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!

Fix email mistakes while you QA.

Save time and create more engaging emails. Email on Acid’s Campaign Precheck allows you to find and fix email problems mid-workflow, so you can streamline your email QA and testing. Take advantage of our accessibility check, preheader preview, URL validation and image validation. Try it free for seven days!

Start for Free

Author: Alex Ilhan

Hailing all the way from England, Alex brings his email development expertise along with an endless stream of cups of tea and British cynicism. Follow him on Twitter: @omgitsonlyalex.

Author: Alex Ilhan

Hailing all the way from England, Alex brings his email development expertise along with an endless stream of cups of tea and British cynicism. Follow him on Twitter: @omgitsonlyalex.

7 thoughts on “Using Pseudo-Elements to Progressively Enhance Your Emails”

    1. Nick,

      Glad you enjoyed our article. Yes, Outlook is a very specific beast, but its limitations can be a great source of inspiration for getting truly creative with your emails. Best of luck with your coding and happy testing!

    1. Thanks for the feedback. Glad you found the blog helpful. Also, don’t forget to sign up for a free trial of our platform. You can sign up on our website.

Leave a Reply

Your email address will not be published. Required fields are marked *