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
Use CSS pseudo elements (::before) for tooltips, Font Awesome icons, and speech bubbles
Learn what ::before and ::after CSS pseudo elements are used for, with several examples including speech bubbles, FontAwesome icons, and CSS-only tooltips.