Styling with ::before and ::after Pseudo-elements

Hello! Welcome to the next lesson in your front-end development course.

In our last session, we explored how to bring designs to life with interactivity using pseudo-classes like :hover and :focus. We learned that pseudo-classes apply styles to an element based on its state.

Today, we'll explore a related but distinct concept: pseudo-elements. This lesson will teach you how to add decorative elements and icons using the ::before and ::after pseudo-elements.

While pseudo-classes style an existing element in a certain state, pseudo-elements act like virtual elements that you can create and style entirely with CSS. For a designer, this is an incredibly powerful technique. It allows you to add rich visual details—lines, overlays, custom icons, and more—without cluttering your HTML with non-semantic tags. You can keep your markup clean and meaningful while still achieving sophisticated design effects.

1. What are ::before and ::after?

The ::before and ::after pseudo-elements create a "virtual" first child and last child, respectively, inside a selected element. You can then style these virtual elements just like any other element on the page.

There's one crucial rule: for a pseudo-element to be rendered, it must have the content property defined in CSS.

Let's start with a foundational reading that explains this core concept.

As the article demonstrates, ::before and ::after are inserted inside the element you target. They are inline by default, which means you can't give them a width or height unless you change their display property (e.g., to block or inline-block).

A quick note on syntax: you will sometimes see the older single-colon syntax (:before). While most browsers support it for backward compatibility, the modern standard is the double-colon (::before) to distinguish pseudo-elements from pseudo-classes.

2. Creating Decorative Elements

The most common use for pseudo-elements is to add visual flair that is part of the design, not the content. This is where you can translate some of the detailed work you might do in Figma directly into code.

Even if the goal is purely decorative, the content property is still required. In these cases, we simply set it to an empty string: content: '';.

The video below demonstrates two powerful examples of using pseudo-elements for decoration: a dynamic underline for a heading and an intricate hover effect for a set of cards.

Let's break down the key techniques from that video:

• Positioning is Key: A common pattern is to set position: relative; on the main element and position: absolute; on its ::before or ::after pseudo-element. This allows you to position the decorative element precisely relative to its parent.
• Layering with z-index: To place a pseudo-element behind the parent's main content (like the red bar behind the heading), you can use a negative z-index (e.g., z-index: -1;).
• Combining with Pseudo-classes: The card example shows the true power of this system. By targeting card:hover::before, you can change the styles of the pseudo-element when the user hovers over its parent.
• Animating with transform and transition: The growing lines on the card were created by changing the transform: scale() property on hover. The smoothness of the animation comes from the transition property. This is a fantastic preview of our next lesson, where we'll cover transitions in detail.

3. Adding Icons

Another excellent use for pseudo-elements is to add icons to your interface, such as a user icon next to a name or a link icon next to an external link. This keeps your HTML free of purely presentational tags like <i class="icon-user"></i>.

One of the most popular icon libraries, Font Awesome, can be used this way. The process involves using the icon's unique Unicode character in the content property.

This next video explains the entire process.

Here's a summary of the CSS needed to make this work, using the user icon from the video as an example:

.username::before {
  /* 1. The Unicode for the specific icon */
  content: '\f007'; 
  
  /* 2. The Font Awesome font-family and weight */
  font-family: "Font Awesome 5 Free";
  font-weight: 900; /* 900 for solid icons, 400 for regular */

  /* 3. Now you can style it like text! */
  margin-right: 0.5em;
  color: #555;
}

4. Accessibility Considerations

This is a critical point for any designer or developer. Since pseudo-elements are not in the HTML, their content is not always reliably read by assistive technologies like screen readers.

The rule of thumb is simple: if the content is essential for understanding, it belongs in the HTML. If it is purely decorative, it belongs in CSS.

• Good Use Case: A decorative flourish, a background shape, or a magnifying glass icon on a button that already says "Search". The meaning is clear without the icon.
• Bad Use Case: A shopping cart icon that is the only thing indicating a link to the shopping cart page. A screen reader user might not know what the link does. In this case, the icon should be an <img> with proper alt text, or the link should have accessible text.

The CodersBlock article we looked at earlier has an excellent section on this.

Conclusion

You've now learned how to use ::before and ::after to add a new layer of visual polish to your projects, all while keeping your HTML clean and semantic. This technique bridges the gap between static design mockups and dynamic web interfaces, allowing you to implement detailed decorative patterns and icons efficiently.

Key Takeaways:

• ::before and ::after are pseudo-elements that insert virtual content inside an element, which you can style with CSS.
• The content property is required for them to render. Use content: ''; for purely decorative elements.
• They are powerful for creating decorative shapes, overlays, and borders, especially when combined with position: absolute.
• You can create interactive decorative effects by combining pseudo-elements with pseudo-classes (e.g., :hover).
• Icons can be added cleanly using the content property with a font library like Font Awesome.
• Accessibility is paramount: Use pseudo-elements for decoration, not for essential content.

In the examples today, we saw how adding a transition property can make changes to pseudo-elements feel smooth and professional. In our next lesson, we will dive deep into CSS transitions to learn how to create deliberate, polished animations on property changes.