CSS Pseudo Elements
The Valley of Code
Your Web Development Manual
Learn the basics of CSS Pseudo Elements
Pseudo-elements are used to style a specific part of an element.
They start with a double colon
Sometimes you will spot them in the wild with a single colon, but this is only a syntax supported for backwards compatibility reasons. You should use 2 colons to distinguish them from pseudo-classes.
::after are probably the most used pseudo-elements. They are used to add content before or after an element, like icons for example.
Here’s the list of the pseudo-elements:
|creates a pseudo-element after the element
|creates a pseudo-element before the element
|can be used to style the first letter of a block of text
|can be used to style the first line of a block of text
|targets the text selected by the user
Let’s do an example. Say you want to make the first line of a paragraph slightly bigger in font size, a common thing in typography:
Or maybe you want the first letter to be bolder:
::before are a bit less intuitive. I remember using them when I had to add icons using CSS.
You specify the
content property to insert any kind of content after or before an element:
content: "Hey Hey!";