CSS Tutorial
CSS Pseudo-elements
A pseudo-element lets you style a specific part of an element, or insert brand-new content, without adding any HTML. The famous ::before and ::after generate content, while others style the first line, first letter, or highlighted text.
What is a pseudo-element?
A pseudo-element uses a double colon and represents a piece of an element that does not exist as a separate tag — such as its first letter, its first line, or a virtual box before and after its content. They are powerful for decorative touches, icons, and typographic flourishes that would otherwise need extra markup.
| Pseudo-element | Targets / generates |
|---|---|
| ::before | A generated box before the element's content |
| ::after | A generated box after the element's content |
| ::first-letter | The first letter of a block of text |
| ::first-line | The first line of a block of text |
| ::selection | The portion the user has highlighted |
| ::placeholder | The placeholder text of an input |
⚠️
::before and ::after require the content property to appear at all. Use content: "" for a purely decorative element with no text.
Generating content with ::before and ::after
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: system-ui, sans-serif; padding: 20px; }
.note::before {
content: "★ ";
color: #f59e0b;
}
.price::after {
content: " (INR)";
color: #64748b;
font-size: 0.8em;
}
</style>
</head>
<body>
<p class="note">Starred with a generated icon.</p>
<p class="price">499</p>
</body>
</html>Typographic touches: first-letter and selection
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: system-ui, sans-serif; padding: 20px; }
p::first-letter {
font-size: 2.4em;
font-weight: bold;
color: #2563eb;
float: left;
margin-right: 6px;
}
::selection {
background: #16a34a;
color: white;
}
</style>
</head>
<body>
<p>Cascading Style Sheets let you decorate text with a drop-cap first letter. Try selecting this sentence with your mouse to see the custom highlight colour.</p>
</body>
</html>A decorative divider using ::after
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: system-ui, sans-serif; padding: 20px; }
h3 { position: relative; }
h3::after {
content: "";
display: block;
width: 60px;
height: 4px;
background: #dc2626;
margin-top: 8px;
border-radius: 2px;
}
</style>
</head>
<body>
<h3>Featured Roles</h3>
<p>The red underline below the heading is a generated ::after box, not real markup.</p>
</body>
</html>Key points
- Pseudo-elements use double colons and style a part of an element.
- ::before and ::after generate content and need the content property.
- ::first-letter and ::first-line style typography without extra HTML.
- ::selection and ::placeholder restyle highlighted text and input hints.