How To: Use CSS :after pseudo-elements to create simple overlays

More and more in web design, we find ourselves putting text on top of images. More often than not, this is a dangerous game. Images have dynamic color and lighting and text for the most part is one color. This is often a nightmare for readability and accessibility.

This means we want to introduce an overlay to sit between the image and the text. Sometimes this darkens the background image enough for readability. Other times it’s a branding opportunity. Either way we need a simple CSS technique to introduce this sort of overlay.

Since I prefer not to introduce new markup for an embelishment, we’ll use the CSS ::after pseudo-element.

The process looks something like this:

  1. Create the simplest HTML for your area
  2. Use a ::before or ::after element to create your banner
  3. Fix z-index issues caused by absolute positioning
  4. Experiment with mix-blend-mode for fun and profit
Promo Image for Practical CSS Grid 50% off!

Practical CSS Grid 50% off!

Whether you're new to CSS Grid or have played with it, finding practical examples of this new layout mechanism is the best way to learn it's power. Sign up below to learn more about my Practical CSS Grid course and get 50% off when it comes out!

Sign Up Now

Step 1: All the markup you need, none of the bloat

Grid Love

In a banner, all we really want is the banner’s container and any content that banner needs to contain.

<section class="banner">
    <h1>Hello World</h1>
</section>

In this example, we’ll just utilize a section container and an <h1>. If you added more content, it could be siblings to the <h1> or you could place all of your content in a content container of some sort to do any positioning.

A little CSS magic is happening here for the added height of the banner as well as the centering of the text. That’s not important for this demo, but if you’re curious, it exists in the CodePen.

Step 2: Add the overlay element dynamically with ::after

Natively, CSS gives us the powerful ::before and ::after elements for adding stylistic content to the page that shouldn’t affect markup.

By apply ::before or ::after to an element, you can insert a dynamic element into the DOM before or after the selected elements children.

One important note, all pseudo-elements require a content CSS property to display. In our case, this will just be a blank string.

Grid Love
.banner::after {
    content: ""; // ::before and ::after both require content
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(120deg, #eaee44, #33d0ff);
    opacity: .7;
}

Now we have an element that is full-width and -height. To do this, we utilize absolute positioning, as we don’t want to affect the content flow of the document.

We make the overlay slightly transparent utilizing the opacity property.

In this example, I chose a fun gradient, but you could use a simple background color or even another image to overlay.

Step 3: Fix z-index issues

The keen-eyed observer would notice that something isn’t quite right in the example. Our friendly overlay is covering not just the background image, but also the text in the banner.

By using absolute positioning, we’ve actually put the overlay on top of the stacking context of our banner. To fix this, your overlay and your content will need to have a z-index applied to them. I usually give the overlay a 1 and my content 100.

.banner::after {
    ...
    z-index: 1;
}
.banner > * {
    z-index: 100;
}

And with that we have a finished overlay.

Grid Love

Bonus step: Advanced overlays with blend modes

Grid Love

I’ve been toying with background blend modes for a little while now, but it blew me away when I discovered mix-blend-mode. This allows a developer to blend multiple elements together!

Use mix-blend-mode on your overlay and you’ve got some fun new combinations to try out.

.banner::after {
    /* opacity: .7; */
    mix-blend-mode: color;
    mix-blend-mode: hue;
    mix-blend-mode: hard-light;
}

The support for various blend modes are pretty weak in the Microsoft browsers, but you can still use them today with clever progressive enhancement. If you want them to be built in Edge, you can let Microsoft know about your passion here.

Until that time, let’s use @supports queries to make sure our code still respects our friends using Edge and IE. The above code removes the transparency from our overlay and lets the blend mode do it for us. Instead of removing it, let’s negate it behind a support query.

.banner::after {
    opacity: .7;

    @supports (mix-blend-mode: hue) {
        opacity: 1;
        mix-blend-mode: color;
        mix-blend-mode: hard-light;
        mix-blend-mode: hue;
    }
}

This way in browsers that don’t support blend modes, we get our average, but nice overlay and in browsers that do, we get some really neat effects on our banner.

Overlays should be simple and clean and never bloat your HTML with additional markup. This is one of my favorite uses of ::after elements. It just makes so much sense.

If you want to play with the code in this tutorial, the CodePen is embedded below:

You May Also Enjoy

Build Trust on the Web incorporating User Worries with your User Stories

The web is suffering from a crisis of trust. Every week there’s a new story posted about a data breach or untrustworthy practices (I’m looking at you, Facebook). How can we fix that? When we create user stories for new features, shouldn’t we also create user worries about them?

Starting a new journey with Code Contemporary

I'm beginning my new journey as an independent creator. I've left the comfortable confines of agency life to see what I can do creating resources for designers and developers. I'll be writing, recording, speaking and consulting. Much of this will be under the heading of my new company Code Contemporary

Dynamic Static Sites with Netlify and iOS Shortcuts

An experiment adding dynamic functionality to this site pushed via iOS shortcuts and Netlify functions

My Side Projects

Web Workers Logo Web Workers Logo Web Workers Logo Web Workers Logo