Pseudo-Classes and Pseudo-Elements | Lecture 28

Let’s begin with Lecture 28 of the HTML5 & CSS3 series. Pseudo-Classes and Pseudo-Elements – Style States and Add Decorative Content. This lecture is for absolute beginners; even kids can follow along and understand.

Table of Contents

🎯 Objective:

By the end of this lecture, you will:

Understand what pseudo-classes and pseudo-elements are
Know how to style elements based on their state (like :hover, :active, :focus)
Be able to add decorative content using ::before and ::after
Create cool effects like tooltips, buttons with icons, and styled links
Make your website more interactive and visually rich without extra HTML!

💡 What Are Pseudo-Classes?

Pseudo-classes let you style an element based on its state, not just its structure.

Think of it like this:

If a button is a person, then pseudo-classes are like moods — happy when hovered, active when clicked, focused when selected.

Common Pseudo-Classes:


`:hover`	When user hovers over element
`:active`	While the element is being clicked
`:focus`	When element receives focus (e.g., by tabbing or clicking)
`:visited`	For visited links
`:nth-child()`	Select specific child elements
`:first-child`,`:last-child`	Target first or last child

🖌️ Example: Styling Links in Different States

a {
    color: blue;
    text-decoration: none;
}

a:hover {
    color: red;
}

a:visited {
    color: purple;
}

a:active {
    color: orange;
}

This gives your links different colors depending on what the user is doing!

💡 What Are Pseudo-Elements?

Pseudo-elements let you style specific parts of an element or insert generated content before or after the element’s actual content — all with CSS!

They start with two colons : ::before or ::after.

Common Pseudo-Elements:


`::before`	Inserts content before the element’s content
`::after`	Inserts content after the element’s content
`::first-letter`	Styles the first letter of a block of text
`::placeholder`	Styles placeholder text in input fields
`::marker`	Styles list item bullets or numbers

🔤 Basic Syntax

Using ::before and ::after:

.selector::before {
    content: "✨";
    display: inline-block;
    margin-right: 5px;
}

.selector::after {
    content: url("icon.png");
    display: inline-block;
    margin-left: 5px;
}

💡 The content property is required — even if it’s empty (content: "").

💻 Try This: Build a Styled Button with Icons Using `::before` and `::after`

Let’s create a custom button that shows an icon before and after the text using only CSS.

Step 1: Create a New File

In your VS Code project folder (MyFirstWebsite), create a new file named:

styled-button.html

Step 2: Add This Code

<!DOCTYPE html>
<html>
<head>
    <title>Pseudo Elements & Classes</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            padding: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .btn {
            display: inline-block;
            padding: 12px 20px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        /* Add icon before */
        .btn::before {
            content: "🔵 ";
            margin-right: 5px;
        }

        /* Add icon after */
        .btn::after {
            content: " 🔚";
            margin-left: 5px;
        }

        /* Hover effect */
        .btn:hover {
            background-color: #2980b9;
            transform: scale(1.05);
        }

        /* Active state */
        .btn:active {
            transform: scale(0.98);
        }

        /* Focus ring for accessibility */
        .btn:focus {
            outline: 3px solid #2980b9;
            outline-offset: 2px;
        }
    </style>
</head>
<body>
    <button class="btn">Click Me</button>

    <p style="position: absolute; top: 20px; left: 20px;"><a href="index.html">Back to Home</a></p>
</body>
</html>

Step 3: Run with Live Server

Right-click the code → Show All Commands → Launch Live Server

🎉 You’ve built a stylish button that:

Shows icons before and after the text
Changes color and size on hover
Gets smaller slightly when clicked
Has a focus indicator for keyboard users

💡 Bonus: Add a Tooltip Effect Using `:hover` and `::after`

Add this inside your <style>:

.tooltip {
    position: relative;
    cursor: help;
    padding: 10px;
    background-color: #ecf0f1;
    border-radius: 4px;
    display: inline-block;
}

.tooltip::after {
    content: "This is a tooltip!";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-size: 12px;
}

.tooltip:hover::after {
    opacity: 1;
}

And add this HTML inside your <body>:

<div class="tooltip">Hover over me!</div>

Now you have a simple tooltip that appears on hover! 🧠

Pseudo Classes and Pseudo Elements — A girl typing into a computer screen showing a button with labels

🧪 Try It Yourself!

Replace the button icons with emojis or SVGs.
Use ::first-letter to style the first letter of a paragraph differently.
Style every other list item using li:nth-child(even) for zebra-striping.
Add a loading dot animation using ::after and @keyframes.

🚀 Next Lecture Preview:

In Lecture 29, we’ll learn how to build real-world projects using everything we’ve learned so far — starting with a personal portfolio page that showcases your name, skills, and contact info in a beautiful layout!

Stay Updated

If you found this information useful, don’t forget to bookmark this page and Share.

HTML5 and CSS3 Compleate Series