CSS Pseudo Elements
New Course Coming Soon:
Get Really Good at Git
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.
::before
and ::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:
Pseudo-element | Targets |
---|---|
::after | creates a pseudo-element after the element |
::before | creates a pseudo-element before the element |
::first-letter | can be used to style the first letter of a block of text |
::first-line | can be used to style the first line of a block of text |
::selection | 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:
p::first-line {
font-size: 2rem;
}
Or maybe you want the first letter to be bolder:
p::first-letter {
font-weight: bolder;
}
::after
and ::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:
p::before {
content: url(/myimage.png);
}
.myElement::before {
content: "Hey Hey!";
}
Here is how can I help you:
- COURSES where I teach everything I know
- THE VALLEY OF CODE your web development manual
- BOOTCAMP 2024 cohort in progress, next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- SOLO LAB everything I know about running a lifestyle business as a solopreneur
- Interesting links collection
- Follow me on X