Pseudo-Elements

The Secret Tricks of CSS Wizards

In the dim, shadowy corners of CSS, pseudo-elements dwell like invisible magicians, quietly casting their spells without ever being seen. While ordinary HTML elements dutifully follow instructions, pseudo-elements appear when you need something extraordinary.

They materialize out of thin air, adding weight to the first letter of a paragraph, conjuring content before or after an element, or transforming list bullets into magical symbols. These subtle yet powerful spells elevate your design from “nice” to “wow!” They work seamlessly behind the scenes, adding depth and flair to your creations without complicating the HTML structure.

Let’s Keep Going

::first-letter
::first-line
::before

::after
::marker
::selection

Pseudo-Elements – More Than Meets the Eye

Decorate text or target the first letter with style!

::first-letter

The Beginning of Every Tale

The ::first-letter spell brings special attention to the first letter of your text. You can make it bigger, bolder, or transform it into a majestic character straight out of ancient manuscripts. It’s the perfect way to pull readers into the story. With ::first-letter, a simple beginning becomes an epic event!

p::first-letter {
    font-size: 2em;
}

This CSS enlarges the first letter of each paragraph to twice the font size (2em) and visually emphasizes it.

::first-line

The Prologue of the First Line

With ::first-line, you can add a magical touch to the opening line of any text block. This pseudo-element grabs the first line and enchants it with colors, font sizes, or even a unique background. It’s like the introductory chant of a wizard.

p::first-line {
    font-weight: bold;
    color: brown
}

This CSS styles the first line of each paragraph bold and brown.

::before

The Harbinger of Content

::before acts as a loyal herald, standing before your element like a messenger that appears just before the main content. It allows you to add content that doesn’t exist in the HTML, making it seem as if it was always there.

h1::before {
    content: "★ ";
}

This CSS adds a star symbol before each <h1> element to visually enhance the title.

::after

The Final Flourish

If ::before is the herald, then ::after is the encore that lingers after the grand finale. It lets content appear after the main text, as if a narrator adds one final note to leave a lasting impression.

h1::after {
    content: " ★";
}

This CSS appends a star symbol after each <h1> element’s content to visually round off the title.

::marker

The List Mark Enchanter

With ::marker, you can take control of list markers. Why settle for ordinary dots or dashes when you can turn them into glowing symbols or enchanting colors? Transform mundane list points into something extraordinary.

ul li::marker {
    color: green;
    content: "→";
}

This CSS makes list markers green and replaces them with arrows.

::selection

The Flickering Magic of Highlights

When someone selects text on your page, it should feel magical. ::selection lets you enchant the highlighted area, making it shine with vibrant colors when a user drags their mouse over it. No more dull gray—just bold, dazzling brilliance! With ::selection, even the act of selecting text becomes an illuminating experience!

::selection {
    background: green;
    color: black;
}

Selected text is given a green background and black font color.

In this lesson, you have learned…

How to use ::first-letter to visually highlight the first letter of a paragraph, making your text more engaging.
Why ::first-line is ideal for emphasizing the first line of a paragraph—by changing its color, weight, or style.
How ::before and ::after can generate additional content without altering the HTML—perfect for creative flourishes.
Why ::marker lets you customize list bullets by changing their color, size, or replacing them with symbols.
How to enhance text selection with ::selection by styling the background and text color of selected content.

Here you can see the code you’ve practiced – but feel free to experiment! Try out changes, test new ideas, and see what happens. This is your space for tinkering!

The Magical Pseudo-Elements

The shadowy fortress hides its secrets in the smallest details—precisely where pseudo-elements work their magic. With the spells ::first-letter, ::first-line, ::before, ::after, ::marker, and ::selection, you can reveal the hidden signs of the fortress. Each spell offers a new perspective, as if opening an invisible book of shadows—and who knows what mysteries you’ll uncover within?

Your task: Manipulate pseudo-elements

Highlight the first character (::first-letter)
Use ::first-letter to emphasize and enlarge the first character of a paragraph. Observe how it draws the reader’s attention to the fortress’s secrets.
Style the first line (::first-line)
Apply ::first-line to give the first line of a paragraph a distinct style, such as italics or a different color. Test how this impacts readability.
Add content before and after the box (::before and ::after)
Leverage ::before and ::after to add decorative content around a box that enhances the shadowy fortress theme. Examine how these pseudo-elements can introduce supplementary visuals.
Design list markers (::marker)
Use ::marker to customize the bullet points in a list with symbols that reflect the quest’s theme. Notice the visual transformation of the list.
Customize text selection (::selection)
Define a unique color scheme for selected text using ::selection to enhance interactivity. Test how the appearance of text changes when highlighted.

Open Visual Studio Code and make these words appear on the page. Or try it right here in the editor!

Open Editor in a New Tab

CSS

/* Pseudo-Elements for the container */
.container::before {
    content: "⚔️ Die Geheimnisse der Festung";
    display: block;
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: #ffd700;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}

.container::after {
    content: "💫 Endstation der Dunkelheit";
    display: block;
    text-align: center;
    font-size: 1.2rem;
    margin-top: 20px;
    color: #ff6f61;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
}

/* Style paragraphs */
p {
    font-size: 1.1rem;
    text-align: justify;
}

p::first-letter {
    font-size: 2.5rem;
    font-weight: bold;
    color: #6df0c2;
    text-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
}

p::first-line {
    font-style: italic;
    color: #82b4f5;
}

/* List with marker */
.secret-list {
    padding-left: 30px;
    margin-top: 20px;
}

.secret-list::marker {
    content: "🔑";
    color: #ffa726;
}

.secret-list li {
    font-size: 1.1rem;
    margin-bottom: 10px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.secret-list li:hover {
    color: #ffd700;
    transform: translateX(10px);
}

/* text selection */
::selection {
    background-color: #283593;
    color: #f0f0f5;
}

Let’s Keep Going