Join Morten Rand-Hendriksen for an in-depth discussion in this video Pseudo elements: Making the browser hallucinate, part of Making Sense of the CSS Box Model.
- [Instructor] Now that I've shown you the power … of the clear fix, it's worth taking a moment … to address the technology that makes this possible, … pseudo elements. … In CSS we have a long list of pseudo classes … that allow us to target specific states of elements. … These are classes like active, focus, hover, … nth-child, and so on. … These classes can be used to alter the display … or behavior of all the content inside an element box. … In contrast, pseudo elements allow us to apply style … to a certain part of an element or document. … Furthermore, these pseudo elements are regular CSS boxes … an adhere to the CSS box model … in the same way that other elements would. … That gives us some pretty cool opportunities. … The available pseudo elements that we have are … before, after, first-letter, first-line, … selection, and the pretty much unsupported backdrop. … The four that are well supported … are used for different things and can be quite useful. … Before and after are used together with a content property …
- Designing with boxes
- The origin of the box in typography
- What is the CSS box model?
- Changing the contents within the box
- Floating and clearing content
- Using the clearfix
- Working with Float, Flex, and Grid
- CSS shapes