July 29, 2019 – Day 1, Session 4

He’s gonna talk about something that doesn’t get a lot of talking about – which is generated content!

pseudo-elements ::before and ::after

Sometimes we don’t really think about this – we use them sometimes but what are they really?

They’re SORT OF elements. They’re elements but not really… They act a little like elements. They tend to get lumped together with pseudo-classes like :hover and :focus but they’re very different things.

:hover for example is acting like a temporary class. These pseudo-elements act like this in a way because they act like a new element has been shoved into the DOM but they’re not really there!

In the specification for psuedo-elements at the beginning of each section there is a pseudo-element! The little section icon before each section number is being inserted with ::before.

The 2 colons before ‘before’ and before ‘after’ signify psuedo-elements versus psuedo-classes which only have one colon.

For backwards-compatibility reasons if you use a single colon browsers will still parse it, but for clarity’s sake starting with CSS something point something, pseudo-elements starting having 2 colons.

Where these are used are for little touches. Like a block-quote you might put big opening quote mark onto of it to signify it’s important or different. You COULD type it into files directly, but for this purpose it makes more sense in his opinion to insert it with a psuedo-element via CSS.

Before doesn’t HAVE to mean visually before, and after doesn’t HAVE to mean visually after.

The question is, let’s go to ::before
Where does it appear? It appears before the first thing inside the element. If it were ::after it would be the last thing inside the element. This gives us some insight into how this is used.

If you wanted to select the first-child inside an element, you can still do that if there’s a pseudo-element in there because it’s not REALLY an element. It doesn’t screw that up.

He provided an example of adding certain icons after .pdf links and other icons after .doc links added with the ::after pseudo-elements. But there is an issue here (and we’ve literally done this) – the images inserted this way to appear appropriately in line with text, and so they don’t appear well. They either look awful and are too small and low resolution or they’re higher resolution and oversized for the intent. And you can’t really fix this.

They aren’t REALLY elements – so you can’t select things inside of it and select them. It’s bringing in content and inserting it. These icons aren’t actual elements so you can’t resize them!

So instead you may have done something like use background images because you can now size them even though there isn’t an element for you to hook onto (ex: background: center/contain;). BUT, even elements without something to insert afterwards

Remember clearfix? 😄
Clearfix worked because it was generating an element box which then you could clear below the other elements that were also generating boxes. So in a lot of cases,

The most recent example he can find of the use of clearfix is this:

.clearfix::after {
content: “”;
display:table;
clear:box;
border: 10px solid purple;
padding:3px;
}

There’s a thing being shoved in there that acts like an element and can be styled like an element even though it’s not actually an element. So, who cares?

You can do a lot of interesting things with this knowledge, knowing that ‘hey I can use this to insert a generic stylable thing.”

You might have a website about getting better sleep and you manage the content on their site and there’s an article about corduroy pilots… The designer might say ‘you know what, it would be nice if we could take the headline and the subhead and separate them a bit visually from the main content.’ Cool, so let’s put in a horizontal rule

But wait, no – it doesn’t really fit in with the rest of the stuff. So, what about if we generate some ::after header content with a space for content, display: block; and some width. Inside of there you could put a linear-gradient background such that it creates a beautiful divider.

header with gradient divider eric meyer generated content after element an event apart

You could use opaque colors of rgba so the colors blend with the background, etc.

In the midpoint of the gradient, you can add in a color stop to tell the gradient where to put the midpoint color so it’s not right at 50%.

You can also layer gradients on top of each other which is SUPER cool and creates lots of unique effects that you can’t create with ONE gradient.

You can also add a radial gradient on top of another gradient!

Or you can put an .svg in the middle of the horizontal rule, and around it / beneath it an opaque radial gradient to have a circle beneath it and then another circle just outside of that in a different color, and if the line-height of your pseudo-element is shorter than the radial gradient, you get a chopped off circle that could look like brackets (lots of tricks you can do here).

custom branded divider using svg image and css psuedo elements with layered gradient backgrounds eric meyer an event apart

The order the gradients appear in is similar to the way you would stack Photoshop layers. Multiple backgrounds are listed front-to-back. This is backwards to how CSS works, so watch out.

Way back in the day there were entire sites devoted to gif animated horizontal rules that had flames or jumping unicorns or whatever and you could download them and put them on your site?

And thanks to progressive enhancement if it doesn’t work it’s no big deal.

CREATING DEVELOPMENT TOOLS WITH PSEUDO-ELEMENTS

You can also use these to display the breakpoint you’re working on in the top left of your screen during development!!

Or you could display the IDs of attributes on the website / development page itself, so instead of seeing [logo] [tagline] in a header it would show ‘masthead [logo] [tagline]’ right on the page so you know what element will be inserted/displayed there. This is literally what the Firebug tool in Firefox does.

You could also use psuedo-elements to outline all elements on the page and add labels to them so you could show a manager the live prototype of the site that will now to them look exactly (or not) like the wireframe you made. Yay! You can always even add some damn ‘x’s using an .svg

Flexbox makes vertical and horizontal styling SO EASY…

You can also stack text shadows on top of each other within the same declaration…

FUN FACT: Octothorp is the technical term for hashtag…. thanks, Eric. I’ll go home now.

AUTOMATING DESIGN TOUCHES

Sometimes on his website he has code blocks, and oftentimes inside those elements is a class stating what language is in the code block.

So he has used a psuedo-class to add a block designating what language the code was as a visual cue.’

psuedo class to identify what language is present in a pre code block css eric meyer

He played around with things like positioning or negative margin, writing mode, transform, and even then adding typical symbols you see with that particular language.

Also if he decides at some point he doesn’t like the sideways labels he doesn’t have to remove them from all his pages or code blocks, he just has to rewrite some CSS!

For positioning he could also use grid.

The pseudo-element which cannot be selected directly and does not create real elements in the DOM is still treated by flex-box as a flex item and by grid as a grid-item.

This sort of technique can be used for more than labeling code blocks.

You could use html data-cat attributes to insert the categories of a news article, and then use a pseudo-element to insert the actual value of that attribute dynamically into the content and then style it the way you want all via CSS.

So what is the downside?
We’re used to thinking of generated content as a thing that screen-readers ignore, but it is not because browsers would ignore the generated content as real content so screen-readers would ignore it. But developers didn’t intend that, so now browsers don’t ignore it. So, if you use generated content it is most likely to be read by a screen-reader.

Example: If you write css to insert content of “(PDF)” after any links that are linking to PDF documents, a screen reader would read aloud something like “Get the Report PDF”.

You can even set an accessible aria-label to something like “Get the report link to PDF” even if you don’t want to display that text in the browser.

If you’re going to be using generated content for actual TEXT (not just cool separators or icons), you need to think about how screen-readers will actually read that (whether you want it read or not, what you want it to be read as, etc).

@meyerweb

How To Choose A WordPress Theme For Your Website

In this guide you'll learn four tips to make choosing a WordPress theme a bit easier. This is a 5 page guide with an approximately 4 minute read.

How To Pick A WordPress Theme For Your Website • Download the Guide

How-to-choose-a-wordpress-theme-thumbnail-sm 5 page guide • 4 minute read

In this guide you'll learn four tips to make choosing a WordPress theme a bit easier.

Powered by ConvertKit

Success! Check your email for the guide.

Where To Host Your WordPress Website and Why It Matters

In this guide we discuss what makes 'good hosting' including security, speed, and support. We tell you who we use and why, and give you a coupon! YAY COUPONS! This is a 45 page guide with an approximately 3 minute read.

How To Pick A WordPress Theme For Your Website • Download the Guide

How-to-choose-a-wordpress-theme-thumbnail-sm 5 page guide • 4 minute read

In this guide you'll learn four tips to make choosing a WordPress theme a bit easier.

Powered by ConvertKit

Success! Check your email for the guide.

8 WordPress Plugins That Can Take Your Website To The Next Level

For our business clients, we install some specialized WordPress plugins. Get our list of the 8 next level plugins we love and the use case for each. 

How To Pick A WordPress Theme For Your Website • Download the Guide

How-to-choose-a-wordpress-theme-thumbnail-sm

5 page guide • 4 minute read

In this guide you'll learn four tips to make choosing a WordPress theme a bit easier.

Powered by ConvertKit

Success! Check your email for the guide.