HTML Tutorial: Easy Way to Understand the Before and After Pseudo Elements

The common question I get from students relates to the before and after pseudo selectors. And so in this guide, I want to walk through a dead simple explanation for how they work. And what we’re gonna do is, we have our links right here on the menu and I want to add a little link icon right to the right of each one of them. Now technically I could just go to Font Awesome and then we could put an icon, place it inside of that H1 tag, but then we’d have to do it for each one of these elements. But what if we want to have every anchor tag in the entire application to have a link there? Well that is a perfect scenario for using an after, or a before pseudo selectors. Let’s talk about what they are because they can look a little bit confusing if you’ve never seen them. But I think that after we walk through this demo, it’s gonna make a lot more sense.

Let’s switch back to the code here, and we have right here our spicy H1 anchor tag. And we can get access to this, if we just look and we select an anchor link and then we grab the H1 tag inside of an anchor link. That’s gonna give us exactly what we’re looking for. Let me open up our helper’s file and down below I’m gonna grab the anchor link and then after that, I’m gonna grab the H1 and then I’m going to add two semi-colons here, and I’ll say before … because I’m gonna show you both the before and after pseudo selectors. And this is a very different way of working with CSS because usually with CSS we don’t render items in content directly on the page. But that’s exactly what this pseudo selector allows us to do. What I’m going … the attribute I’m gonna use is called content. And then content takes a string. Right here I’m going to say content, and let me just say I’m before. And then I’m going to copy this and now we’re also going to create an after pseudo selector.

And here I’m going to add just a little dash and here I’ll say I’m after, and I’ll put a dash and a space right there. Now if I hit save and come back and hit refresh, you can see that this added the actual content in the H1 link. We did not touch the HTML whatsoever. What before and after do is they allow you to select an item on the page and add content to it. This can be incredibly helpful because notice if you scroll down, this has been … this has affected every one of the anchor tag H1s. And if you wanted to say, make a change that populated on hundreds of pages, this is a great way of doing it. If not, you’d have to go and find every single anchor tag in the entire system and then change it. That’s really all that you need to do. Now I want to add an icon, so let’s talk about what we can do in order to make that happen. I’m gonna get rid of this before tag here, and in the content I am going to add a unicode character.

We need to switch back to the browser and let’s go to Font Awesome here. Oop, not fonts Google, Font Awesome. And we’re going to grab a link tag here, so let’s type in link and then click on it. With Font Awesome, the traditional way that you use it is to simply grab their HTML elements in these little i tags. But you also have a few other options. You could get the actual glyphicon which is not something that I do very often. In fact I don’t think I’ve ever done that. But this one is very helpful. This is a unicode representation of the icons. What this is going to allow us to do is to call this directly from within a CSS file. Because we can’t call these class names, so we’re gonna call this unicode. And this is going to allow us to treat it exactly like a font. Now inside of the content, I’m going to use an escape character, so this is gonna be a forward slash, or backward slash. And then from there I’m going to paste in that unicode character.

I’m going to also add a space right there, just so we have a little bit of space between the content and our content tag. That is the content, but one other thing we have to do here is we have to bring in the font family. We have to use the Font Awesome font family, and this part’s a little tricky and this required me the first time I had to do it on an app … This took a little bit of debugging because you would think that you could just do something like this … Where you call Font Awesome, but that technically doesn’t work. And their documentation doesn’t do a good job of explaining it, so you have to say, Font Awesome and then the version, so we’re using version five, and then free. That is a little bit odd. There’s also one other trick and this one was very frustrating because there was nothing in the documentation that explained it. But Font Awesome also requires for their free icons, you to only use a certain font weight. You have to pass in a font weight and so the font weight needs to be at 900.

Now if we do this and come back to our menu page and hit refresh, you can see we’ve added that link. And the link has been populated every single spot where we have any of our H1 tags inside of an anchor link. And so this is something that, if you look at other code bases, you’re gonna see this little after pseudo selector all over the place. One of the most popular places I see it is within the body tag. And so the body tag, they’ll put some kind of before and after … And it might look a little weird, especially if you’ve never seen it before. And so I want to create a dead simple example, and a practical example of how it can be used. It literally is doing exactly what it says it’s doing. It gives you the ability to put content before or after an element that you’ve selected.