Pseudo Elements

[00:00:00]
>> Kevin Powell: So here I have an H1. Let's select it. We'll do this at the top. H1 before content. Whoops. I still forget to put content sometimes despite doing these all the time. So don't feel bad if you're trying to get it to work and it's not showing up and you don't know why. So if I come and take a look in here and I open that up, I actually see it showing up here in my dev tools. There is a before element.

[00:00:33]
Means I can do stuff with it. So let's come on that and try and do something with it. If I try and do anything with it to begin with, it doesn't really exist, so I'm going to say this is actually going to be a display of inline for now. And actually it's a bit of a lie. I could just put some content. Hello. It's there. I can't select it because it's not actually HTML content, but it's there. I can't do anything with it because it's nothing yet.

[00:01:06]
So if I wanted to actually do something with it, that's where I need the display properties. A lot of the time we're not putting text in there, so the position or the display property is if you want to actually make it look like something and not just have a string of text, you will need those. But I can do that, hello, let's just come in actually with an H1 after content goodbye. And that will show up after the content.

[00:01:36]
There's a really common misconception with before and after that we're adding content before the H1 or we're adding content after the H1. It's not what they're doing. They're adding content before the content of the H1 or after the content of the H1. So they are technically siblings of that, or not siblings, they're technically children of the H1 that I've created them on. Now, on both of those, I could say they have a display of block, I'm missing a semicolon, we'll fix that.

[00:02:11]
And now they're going to behave like block level elements. They force a new line. Cool. You know, we can do some stuff with that, maybe we don't even want a string of text in here, we just need them to exist because they're very good for decorational elements. Saves me having to create spans and having to insert these in there. So I say, you know what, for both of, we can do this with a single selector actually.

[00:02:37]
Let's save some time. H1 after. So they both have no content, they're both display block. Maybe they both have a width of 500 pixels height. We don't do heights, but I said early on we could do it for like decorative things where it's small things, we're not worried about the content that's inside of these, and we give them a background color of black. Oh, I have a period instead of a comma. Thank you.

[00:03:04]
There we go, they show up on the page. I have some decorative elements. Pixels here don't really make much sense because I don't know how big they're going to be. Maybe I give these, let's go actually on the H1 itself. Start with H1 text align center. So the text is centered, then I could say these are, instead of a width, maybe I could say this is 80%, so it'll be 80% of the size of the H1. And then I could do a margin inline of auto.

[00:03:44]
I don't really like that they're touching the text margin block of 2rem, something like that, create some space around it, and now I have this as a decorative element around my H1. This is why they're very handy for this type of thing. Instead of having to come in here and add two spans and then manage my spans or two divs or whatever we're doing to try and have these empty elements, anytime I see code that just has something like a span close span with no actual content inside of it because they needed something to decorate, I go, hmm, that should have been a pseudo element, and we do it with the pseudo element instead.

[00:04:21]
The advantage of it being a pseudo element instead of it being a span that's there is that every time I want that, if I have an H1, it's going to be there. If I do it with the span, I have to remember to insert the spans, I have to worry with the first span, the last span, all these other things around it. Much easier to do it with a before and after that I'm inserting into the content. The content property itself can do a lot more than just be empty or be strings of text.

[00:04:45]
I'm not going to have time to go into it today, but you can use it for counters. You can actually count 1234, like numbered lists, but using it for other things that are more decorative. One that a lot of people don't know about is we have a block quote here. These are different, sort of, you know, two CSS properties walk into a bar, bar stool is complete in a completely different bar falls over, just because CSS is weird.

[00:05:16]
But what we could do is on my block quote, block quote before, we could come in with a content of open quote. And it'll add quotation marks to the start. Kind of cool. Now there's a weird thing that's happened. This one's an opening quotation mark, so it's double. All the other ones got single ones. Anyone want to guess why that's happening? Because you didn't close it. Yeah, we don't have a closing quotation mark.

[00:05:40]
So it's sort of like if you're doing, you're writing code, right, and you want to have something quoted inside, you can't use the double ones again, you switch to the single. Same thing here. We have an open quote, and then we have another open quote, so they're essentially nested open quotes. So I could come in with my block quote after content close quote. And I can put a closing quotation mark, and then it knows this is a new one over here.

[00:06:09]
Now part of the problem here is we've messed up our alignment. You know, it's kind of weird that the quotation marks there. These are elements, they're in, they're part of the content of my block quote, but hey, I could do a position absolute on here and say that the top is, I don't know, -20 pixels. And I didn't go on the parent. The block quote itself is the parent. Remember this is the content.

[00:06:49]
This is before the content of the block quotes, the block quote is the parent, create a new stacking context, position relative. So we get that there left -20 pixels. Maybe it's a bigger font size. That might be the same font size or smaller even. Come in with a more decorative open quote that you have hanging off the side, change the color of it, do other things like that. You could, you know, do something pretty nice with this nice open quote close quote without actually having to make it a quotation mark.

[00:07:21]
And to fix the issue of maybe you don't want the closing quotation mark there for both opened and closed, you have, I think it's a no quote. I might get that one wrong. I did. What is it, no close quote. There we go. No close quote. So it's closing the quote without putting the quotation mark is essentially what that says. Very niche, but I love these types of things, so I had to share it with you today.

[00:07:44]
Another thing that I wanted to talk about is that I mentioned there's accessibility concerns with pseudo elements because we're generating the content. One of the biggest issues is with screen readers, as they're reading it, there's an inconsistency between screen readers on how they treat pseudo elements. From what I understand today, they all read the content, so if you put text there, the screen reader will read that text.

[00:08:09]
The problem is you can bring in other stuff. We saw I just did the closed quotes, open quotes, you can bring in images as well. So just the same way you have a background image, you can bring in an image. So let's say I'm not doing it in this case, but maybe these icons are coming in as pseudo elements. They're getting generated and put in. It could be that you have an error or a warning, and there's no text to go with it, it's just an exclamation point that shows up.

[00:08:39]
So now, if you do want to, you can include alt text on the content property. So you put the content itself, you put a forward slash, and then after the forward slash inside quotation marks, you can include alt text. So it's a really good thing to have, browser support for it is. I thought that no browsers had or I'm like maybe someone has added this. A few weeks ago I found out that it actually has really good browser support.

[00:09:04]
So it's at 93% and it's across the board with Safari 17.4 being the latest. It's a nice progressive enhancement, worst case scenario that hopefully everybody's getting that alt text, but at least you know as things are going forward, it will only improve in browser support, especially if you don't have any real way of coming in with another option in handling it. I will say though that in general, if it's actual content, you probably want to be doing it with real content in your HTML and using pseudo elements to bring in, I included it on purpose in the decoration and effects, it's generally decorative things and not pieces of actual content that you should be bringing in because accessibility issues, you can't select the text if it's there, if you're trying to select it, it won't select and there's other issues with it as well.

[00:09:52]
So definitely treat it as a decoration. Is it still a problem for internationalization then? That's another good point. I forgot to bring that up. For if you have, because the content isn't in the HTML, if somebody translates the website, it won't translate the pseudo element because the CSS is inserting it and there's no way for the browser plugins, anything like that to see that part of it. So it's translating the HTML itself.

[00:10:17]
Pseudo elements don't get translated, so one of the big problems like tooltips being used as pseudo elements, super cool until you realize, oh, my whole website got translated and all my tooltips aren't being translated now.