From the course: CSS Toolkit: Tips and Techniques for Layout and Styling

Unlock this course with a free trial

Join today to access over 24,700 courses taught by industry experts.

Pseudo-elements are true grid and flex items

Pseudo-elements are true grid and flex items - CSS Tutorial

From the course: CSS Toolkit: Tips and Techniques for Layout and Styling

Start my 1-month free trial Buy for my team

Pseudo-elements are true grid and flex items

“

- [Instructor] The before and after pseudo elements are used for all sorts of things in CSS, but one of the most common uses is as part of a clear fix to prevent containers with floated children from collapsing. You've probably come across this classic pattern. We have the after element and it's globally applied. Our content is set to empty, display block, and clear both. This works well in traditional block layouts, but things get interesting and maybe not interesting in a good way with flex boxing grid. When you add a pseudo element inside of a flex or grid container, it doesn't just get absorbed magically somehow, it becomes a real flex or grid item. It occupies space, just like any other child element. Let me show you how that works. To do that, I will un-comment these. So here, we've got a grid set on this UL container, and now we're using the before and after pseudo elements to add some content. And you can see that these literally become grid items. These two pseudo elements…

Contents