CSS has an amazing power set. Not the least of which is creating stylistic elements on the fly using Pseudo Elements (::after and ::before). We'll cover the basics of ::before and ::after and explore three different powerful design patterns utilizing them.
What you'll learn
Simple and Fancy Image overlays
Want to make sure text is always readable on top of a background image? Don't want to introduce more markup? We'll use an ::after element to create a basic and fancy overlay for images!
Create a CSS-only Tooltip
We don't need JavaScript for simple interactions anymore. We'll use pseudo elements, positioning and data attributes to make a CSS-only tooltip!
Fancy Blockquote
Want to add some spice to your blockquotes? We'll combine both ::before and ::after elements to create a fun blockquote style with fancy quotation marks.
Teaching you modern development and design practices
My name is Bryan Robinson. I'm a designer, developer and teacher based in Memphis, Tenn. I've been passionate about HTML, CSS and JS for my entire career, and I want to teach you to be just as passionate about it, as well.