How to use pseudo-elements in CSS

In this post, we’ll learn how to use CSS pseudo-elements and we’ll also practice their main use cases with everyday situations.

What are pseudo-elements in CSS?

Pseudo-elements are CSS rules that when added to an element present on the page will add style to what the pseudo-element refers to.

For example, The ::after pseudo-element, when linked to an already existing tag on the page, creates a new element after this first one

So we can say that the pseudo-element’s function is to help stylize the HTML without having to create new elements or do some workaround with HTML or CSS.

What is the syntax of pseudo-elements?

Whenever we’re going to use them, we call them this:

div::before {
 /* some style */
}

Assuming there is a div in the HTML of course.

So in this example, above we are adding a ::before pseudo-element to HTML divs.

Before, unlike after, adds an element before the element that the rule was applied to.

Here’s an example where we used ::after and ::before exhaustively to build a star with CSS.

Pseudo-elements that exist

Let’s now see what pseudo-elements exist in CSS:

• ::after;
• ::before;
• ::cue;
• ::first-letter;
• ::first-line;
• ::selection;
• ::slotted;
• ::backdrop;
• ::placeholder;
• ::marker;
• ::spelling-error;
• ::grammar-error;

Some are certainly more used than others…

If I could give you some advice, since there are so many, it would be for you to focus on: ::after, ::before, ::placeholder

These were, for sure, the ones I used the most.

Using pseudo-element in practice

Let’s now use a pseudo-element in practice and see how the construction of this rule works.

First, we created a simple HTML, with a little CSS.

<!-- HTML -->
<div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce rhoncus ullamcorper neque sit amet pellentesque. Vestibulum I lacinia metus. Cras velit orci, feugiat sit amet enim a, tempor lobortis metus. Duis sit amet dapibus ipsum. Integrate ante felis, faucibus in ligula quis, vulputate aliquet turpis.</p>
</div>

/* CSS */
.box {
    width: 300px;
}

p {
    color: red;
}

Here we just create a div with the box  class and limit its width with CSS, besides we insert a p tag inside the div with some text, the result is this:

Now I’m going to add the pseudo-elements:

p::first-line {
    color: blue;
    
}
p::first-letter {
    font-size: 30px;
    color: green;
}

Here we style the first line with ::first-line and the first letter with ::first-letter

See the final result:

Conclusion

We saw in this post that the pseudo-element is nothing more than a possibility to style some parts of our page or even elements already present.

All this with CSS alone, without having to create new elements in HTML.

This can make the code more readable as we won’t have to create a bunch of span tags in the code 😀

And that’s it for today, until the next post!