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.
🎯 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
::beforeand::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.htmlStep 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! 🧠
🧪 Try It Yourself!
- Replace the button icons with emojis or SVGs.
- Use
::first-letterto 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
::afterand@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
