CSS ::before and ::after elements

Learn what ::before and ::after CSS pseudo elements are used for, with several examples including speech bubbles, FontAwesome icons, and CSS-only tooltips.

0:30 A CSS pseudo element VS a regular HTML element
1:02 Create a pseudo element using the CSS modifiers during targeting (method 1)
1:55 The content property must be set to something e.g. "" or "Text" or attr(href)
2:42 Create a pseudo element using the selector variations menu (method 2)
3:04 The starter styles option helps you visualise where your pseudo element is
3:49 Pseudo elements are often absolutely positioned
6:48 5 use case examples
6:48 Creating a speech bubble
12:02 Turning text into two columns with a side image
13:35 Adding a Font Awesome icon
16:08 Creating a CSS only tooltip
23:24 Add a CSS shape divider for a section
Close