In today’s Take 5, you’re going to learn how to add generated content to the links on a web page. Specifically, by the end of the tutorial, you’ll have all links to PDFs or Word documents automatically labeled and styled with CSS. This is the project on CodePen you’ll be working with. And here’s the URL, which you can find linked within the Resources section for this video.

In your HTML is a link to a PDF document. You’d like to label it so your users have a sense of what clicking the link will do, which is generally a good practice. So type the following code carefully. It’s not exactly standard CSS. And feel free to pause the video if necessary.

a[href$='.pdf']::after{
  content:'(pdf)'
}

Now, you look in your page preview. There is a label called PDF after your hyperlink. Perfect. I’m going to explain that syntax you typed in just a moment. But before I do, go ahead and copy the entire block of code and then paste it below, and replace the first instance of .pdf with .doc, and then replace the word pdf with the word doc.

Now, you’ll notice that the link to the DOC file also has its own label. Here’s the quick explanation. There are two components to your style. The first component is this part of the code a[href$='.pdf'] called an attribute selector. This syntax finds all the the a elements on your page that have an href attribute ending in .pdf.

Now, you can test this quickly by changing the .doc extension in your HTML to .pdf. And notice that it changes automatically. So just be sure to undo that.

Now, the second component is ::after, which is referred to as a pseudo element. This syntax injects the value of the content property after your HTML content has ended. There is a companion to the ::after pseudo element called the ::before pseudo element, and you can test that by replacing ::after with ::before. And now the PDF label appears before the link text, but make sure you undo that as well.

Now, important note. Your generated content is not actually part of your HTML. And you can test this by selecting the paragraph in your preview window, then copy and paste it into your HTML. And notice that the word pdf doesn’t show up anywhere.

Believe it or not, this is a feature, not a bug. You should only use this technique for cosmetic content. Critical text always needs to live inside your HTML.

Other cosmetic content might include special characters. So two hyphens and a right bracket would make an old school arrow, for example. Or you could use Unicode characters. So type \2705 for a check mark or \270b for the raised hand emoji. And there’s a link to those Unicode charts in the Resources section if you’re interested in exploring further.

Now, you can also add images. But we’re going to skip that for now, as they can get a little tricky. Let’s go ahead and improve the styling of your generated content. For consistency, the same styles should be applied to both PDF and DOC labels.

So go ahead and copy and paste the PDF attribute selector a[href$='.pdf']::after to the bottom. Type a ,(comma) and now copy and paste the DOC attribute selector a[href$='.doc']::after. Type { (left bracket) and press Return. And now you’re going to style the font-size and color, or both. So add font-size: 0.9em;, color: firebrick;. And now you’ll remove the link underline that extends under your generated content with display: inline block;.

The problem now is that the inline-block style collapsed this space, and things are kind of cramped. So go ahead and type: margin-left: 0.4em;. That takes care of that. And then finally add text-transform: uppercase; to give yourself a more readable label.

So there you have it, a way to add a level of automation to your styling. At this point, if any new links to PDF or DOC files are created, they will automatically adapt this style without anyone having to lift a finger.

So I hope you learned a little more about CSS generated content than you knew before. If you want to double-check your work, here’s the URL to the completed project on CodePen. And you can also find that link in the Resources section for this video.

Finally, be sure to check out the rest of our Take 5 tutorials, as well as the entire course catalog at Gymnasium.