Pseudo Elements Basics (::after and ::before) - Recorded Live by Bryan Robinson

Pseudo Elements Basics (::after and ::before) - Recorded Live

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.