Pseudo-Elements & the Content Property

Topics Covered in This HTML & CSS Tutorial:

Using Pseudo-elements, the Content Property, Seeing Pseudo-elements in Chrome’s DevTools

Exercise Preview

Exercise Overview

Usually content is added using HTML, but in this exercise you’ll learn how it can be helpful to use CSS to add content before or after an element.

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.
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).

   This page is similar to the previous exercise, but notice the links at the bottom of each column are on their own line. This helps them to stand out, and gives us space to add some cool styling. We want to add a special character to all three of the Read More links, which we can do with CSS!

5. Leave the page open in Chrome.

Pseudo-Elements & the Content Property

1. First let’s figure out how to target these links. 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.
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 creates a pseudo-element, which is a virtual (fake) element that will render something into the anchor tag before everything else that’s already in it. It’s typically used to add cosmetic content to an element, as we’d like to do here.

6. Specify the content to add by adding the code shown below in bold. Pay close attention to spaces, and 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. Check out the Read More links to see they now have the special » character added at the beginning of the link.
9. Return to your code editor.

10. Change before to after:

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

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

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

12. Save the file and reload the page in Chrome. Now the » character should be at the end of the link.

Seeing Pseudo-Elements in Chrome’s DevTools

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 see the ::after inside.
3. Click on the ::after and you’ll see the style that creates it listed in the Styles panel.