This course may contain valuable CSS information for reference, but does no longer reflect our course quality standards.
Transcript from the "Before and After" Lesson
[00:00:02]
>> Estelle Weyl: Let's go on to the next, which is Generated Content. The URL for this is estelle.gethub.iu/cssmastery/generated for generated content. So, let's revisit that generated content, we already saw this slide, where it says before and after. So it's basically like putting that pseudo-element before and that pseudo-element after. And right here is where you could style them.
[00:00:30] So you could do anything you wanted to, realizing that right now it is part of the text of the paragraph. It says, if it was in the paragraph you can't select it and it's not part of the dom, but if you style the paragraph the before and after one will inherit all of it.
[00:00:49] If you want to do things like transform it, let's see what we can do with transform. Let's go on to the next one and let's do Dogs are cuter. Now you know where I stand. Let's try transform.
>> Estelle Weyl: Rotate, 45 degrees, so you saw that it did not rotate.
[00:01:22]
>> Estelle Weyl: If I did position absolute, then it would rotate. We're gonna learn about that later on. But basically, you can't rotate something that's statically positioned. In line element that's statically positioned. Okay, so pseudo elements. What most people think is when it says before that it comes before the p and when it says after it comes after the p or whatever element it's in.
[00:01:55] It's actually the p would be that red thing in the background. And that content would include the before the content and the after all together in the foreground. It's as if it was all together. But there's basically a faux span around the beginning and the end that you can style.
[00:02:15] The only part, the only attribute that is required is the content attribute. You can have a value of an empty string, and that means it will create content that you can then style, even though it's empty, but it is there, and you can style it. There's also the word none, so if you have content and you don't want it to show up, right, you don't wanna have content, you just put none.
[00:02:37] Because putting the empty quotes means it's still styleable. So the values you can put in there are none, normal, a string, an image, a counter, open and closed quotes, no open/no closed quotes and attribute.