LuisLlamas Logo
css-pseudo-elementos-before-after

Before and After Pseudo-elements in CSS

  • 4 min
  • Beginner

A pseudo-element in CSS is a virtual part of an element that we can style without adding a real tag to the HTML.

If pseudo-classes (:hover, :focus, :nth-child) are used to select an element based on its state or position, pseudo-elements are used to target specific fragments or pieces generated by CSS.

The ! symbol was placed by CSS

You will recognize them because they are written with double colons (::). In this post we will focus on the two most used ones: ::before and ::after.

::before and ::after

::before creates virtual content before the real content of the element. ::after creates it after the real content.

<p class="mensaje">Hola mundo</p>
Copied!
.mensaje::before {
    content: "👉 ";
}

.mensaje::after {
    content: " ✅";
}
Copied!

Visually, the browser will display something like:

👉 Hola mundo ✅

In the HTML, those two emojis do not exist. CSS generated them at the moment of painting the page.

For years you will see examples with a single : (:before, :after). Today, it is correct to use ::before and ::after, because we are talking about pseudo-elements, not pseudo-classes.

The content property

For ::before and ::after to exist, they need the content property. It can contain text, an empty string, or even values taken from attributes.

blockquote::before {
    content: "«";
    font-size: 2rem;
    color: #94a3b8;
}

blockquote::after {
    content: "»";
    font-size: 2rem;
    color: #94a3b8;
}
Copied!

If the pseudo-element is purely decorative, we use content: "".

h2::after {
    content: "";
    display: block;
    width: 48px;
    height: 4px;
    margin-top: 0.5rem;
    background: #2563eb;
}
Copied!

Without content, ::before and ::after will not appear (empty content is valid)

You can have width, height, background, position, and a doctoral thesis written inside, but if content is missing, the pseudo-element will not be drawn.

Decoration without cluttering the HTML

The most common use of ::before and ::after is to add visual decoration without adding extra tags that do not provide meaning.

For example, a decorative underline under a heading.

h1 {
    position: relative;
}

h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.5rem;
    width: 4rem;
    height: 0.25rem;
    background: #ef4444;
    border-radius: 999px;
}
Copied!

In this case, the heading remains a clean <h1>. The decoration lives in CSS, where it should live. HTML for structure, CSS for presentation. Each in its place and everyone calmer.

We need positioning

Often pseudo-elements are placed with position: absolute. For this to work well, the parent element usually needs position: relative.

.etiqueta {
    position: relative;
    display: inline-block;
    padding: 0.5rem 1rem;
    background: #e0f2fe;
}

.etiqueta::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -0.4rem;
    width: 0.8rem;
    height: 0.8rem;
    background: #e0f2fe;
    transform: translateY(-50%) rotate(45deg);
}
Copied!

That small rotated square can become the tip of a label or a speech bubble. The HTML doesn’t know anything about it, it already has enough to do being semantic.

When you use position: absolute on a pseudo-element, always check who its reference is. Normally you want it to be the element itself, so the parent will have position: relative.

Using attributes with attr()

The attr() function allows you to read the value of an HTML attribute and display it in CSS. It is useful for small details, like visual labels.

<a class="enlace-externo" href="https://example.com" data-tipo="externo">
    Documentación
</a>
Copied!
.enlace-externo::after {
    content: " (" attr(data-tipo) ")";
    font-size: 0.85em;
    color: #64748b;
}
Copied!

This would visually display Documentación (externo).

Do not use content to put important information that only exists in CSS. Critical content must be in the HTML, because CSS may not load, may be ignored by some technologies, or may not behave as you expect.

Complete example: warning with icon

Let’s create a warning box with an icon generated by CSS, like the one we saw at the beginning of the article.

The important text is still in the HTML, and the icon is only visual support.

<p class="aviso">Revisa los campos obligatorios antes de enviar.</p>
Copied!
.aviso {
    position: relative;
    padding: 1rem 1rem 1rem 3rem;
    border-left: 4px solid #f59e0b;
    background: #fffbeb;
}

.aviso::before {
    content: "!";
    position: absolute;
    left: 1rem;
    top: 50%;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: #f59e0b;
    color: white;
    font-weight: bold;
    text-align: center;
    line-height: 1.4rem;
    transform: translateY(-50%);
}
Copied!

This pattern is repeated a lot in interfaces: icons, decorative lines, badges, arrows, separators… small visual pieces that do not deserve their own tag.

On this page