Check out a free preview of the full CSS In-Depth, v2 course:
The "Before, After and Generated Content" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

A quick look at generating content with ::before and ::after

Get Unlimited Access Now

Transcript from the "Before, After and Generated Content" Lesson

[00:00:02]
>> Estelle Weyl: Then we have generated content with before and after. So this is content that doesn't exist but you can add content to it. So before and after don't exist on the page whereas first letter and selection and first line, which we haven't covered yet actually exists, they are on the page.

[00:00:20] There is a first line of text, there is a letter on the page, there is something that you selected. Generated content has no content in it. You have to always add the content property with a value or there is nothing to style. So within every element that is not an empty element.

[00:00:41] As in not an image and not an input, you can create generated content. It is actually supported in some browsers in empty elements, but there's no before or after in a replaced element. If you have a hard line, an HR or horizontal rule, what's before and after? I don't know.

[00:01:02] So generally use it only on elements that have an opening and closing tag. So here we put content. That says before content with is dash. And we made it bold. And then after we put content, that says dash after content and we made it bold. Our paragraph itself just said the content, and this is what it looks like after.

[00:01:24] And if you see, I can only highlight, I'm trying to highlight, I can only highlight the actually content of that paragraph. Not the before and after cuz it's not part of the DOM. It's not on the page. When I do this generated content it is as if I put a P and right after the opening, before the contents of my paragraph, whether that was another element, would be the before.

[00:01:52] These don't actually exist. These are faux elements that I created. But it's as if there was a before and as if there was an after. So here if you wanna play with it, there's the word are. And it says p space are space end paragraph. And you can put anything here.

[00:02:11] Kittens are cute. There, we had kittens in this talk and now it's officially a tech talk. But you can also do, I think it's like U468. Maybe it's this, yeah. You can also put weird characters in there. I don't know what that character is. I have no clue what that character is.

[00:02:38] One, there. We're gonna talk about that a little bit later. As you saw earlier, I generated content with the counter. I'm going, there's a whole section on generated content. So I'm gonna go deep into generated content right now. I'm gonna go deep into generated content in, like, five minutes.

[00:03:02] So I do wanna cover other pseudo-elements. So there was a selection. There was inactive-selection, spelling error, grammar error, and these are future ones. And then there is also content placeholder and marker, which are future pseudo-elements, which I'm not sure are fully supported yet.