Pseudo-Elements & the Content Property

Topics Covered in This HTML & CSS Tutorial:

Mastering Pseudo-elements, Leveraging the Content Property, and Debugging with Chrome's DevTools

Exercise Preview

Exercise Overview

While HTML is the standard vehicle for adding content to web pages, CSS pseudo-elements offer powerful alternatives for specific use cases. In this exercise, you'll discover how to strategically use CSS to inject content before or after elements—a technique that separates presentation from structure and creates more maintainable, scalable code. This approach is particularly valuable for adding decorative elements, icons, or consistent visual cues across your site without cluttering your HTML markup.

Getting Started

1. We'll be switching to a new folder of prepared files for this exercise. In your code editor, close all open files to avoid confusion and maintain a clean workspace.
2. For this exercise we'll be working with the Tahoe Pseudo-Elements folder located in Desktop > Class Files > Advanced HTML CSS Class. Open that folder in your code editor if it allows you to (like Visual Studio Code does).
3. Open index.html from the Tahoe Pseudo-Elements folder.

4. Preview index.html in Chrome (we'll be using its DevTools for debugging).

   This page builds upon the previous exercise, but notice the links at the bottom of each column are positioned on their own line. This intentional spacing creates visual hierarchy and provides the perfect canvas for adding sophisticated styling touches. We want to add a special character to all three of the Read More links using pure CSS—demonstrating how pseudo-elements can create consistent visual elements across multiple instances without repeating code.

5. Leave the page open in Chrome for real-time preview as we make changes.

Pseudo-Elements & the Content Property

Now we'll dive into the practical implementation of pseudo-elements, exploring how they create virtual DOM elements that enhance your design without affecting your HTML structure.

1. First let's identify our target elements. Go to index.html in your code editor.
2. Find the Read More link at the bottom of the first section.
3. Notice it has a read-more class we can use to style it. This class-based approach ensures our pseudo-element styling can be applied consistently across all similar links.
4. Open main.css from the css folder (in the Tahoe Pseudo-Elements folder).

5. Above the .book-now-btn rule add the following new rule

   .read-more::before {
   
   }

   The ::before selector creates a pseudo-element—a virtual element that renders content inside the anchor tag before all existing content. This technique is invaluable for adding decorative elements, icons, or visual cues that enhance user experience while keeping your HTML semantic and clean. Pseudo-elements are rendered as inline elements by default and must include a content property to appear.

6. Specify the content to add by including the code shown below in bold. Pay close attention to spacing—the space after the character is crucial for proper visual separation. To type » use Opt–Shift–\ (Mac) or hold down ALT while typing code 0187 on the numeric keypad (Windows).

   .read-more::before {
      content: "» ";
   }

7. Save the file and reload the page in Chrome.
8. Examine the Read More links to see they now feature the special » character at the beginning. This visual enhancement was achieved without touching the HTML, demonstrating the separation of concerns that makes CSS so powerful.
9. Return to your code editor to explore the alternative placement option.

10. Change before to after to position the character at the end of the link:

    .read-more::after {
       content: "» ";
    }

11. Move the space from before the » character to after it for proper spacing:

    .read-more::after {
       content: " »";
    }

12. Save the file and reload the page in Chrome. Now the » character should appear at the end of each link, creating a more traditional "read more" indicator that users intuitively understand as a call-to-action.

Seeing Pseudo-Elements in Chrome's DevTools

Understanding how to inspect and debug pseudo-elements is crucial for professional development. Chrome's DevTools provide excellent visibility into these virtual elements.

1. CTRL–click (Mac) or Right–click (Windows) on a Read More link's » character and choose Inspect.
2. In the DevTools Elements panel you'll see the HTML code. Expand the <a href="#" class="read-more"> element to reveal the ::after pseudo-element nested inside. Notice how Chrome renders pseudo-elements as actual DOM nodes for inspection purposes, even though they don't exist in your HTML source.
3. Click on the ::after pseudo-element and you'll see the corresponding CSS rule displayed in the Styles panel. This debugging capability is essential when working with complex pseudo-element implementations or troubleshooting inheritance issues.