Tutorial 11 of 44 in series

Pseudo Elements

Style parts of elements or insert content

Abhishek Sharma 2026-05-30 Web Development / Frontend / CSS

25%

Pseudo Elements

Pseudo-elements let you style specific parts of an element or insert content before/after it. They use double colons (::).

Demo: Pseudo Elements in Action

HTML

<p class="quote">CSS is awesome</p>
<p class="tip">Hover over this text</p>
<ul class="custom-list">
<li>Learn CSS</li>
<li>Practice daily</li>
<li>Build projects</li>
</ul>

CSS

.quote::before { content: "“"; font-size: 2rem; color: #6366f1; }
.quote::after { content: "”"; font-size: 2rem; color: #6366f1; }
.tip::selection { background: #fef9c3; color: #1e293b; }
.custom-list li::marker { color: #059669; font-weight: bold; }
.tip::first-letter { font-size: 2rem; font-weight: bold; color: #dc2626; }

Live Output Window

Common Pseudo-Elements

Pseudo-Element	Purpose
`::before`	Insert content before element
`::after`	Insert content after element
`::first-line`	Style the first line of text
`::first-letter`	Style the first letter
`::selection`	Style selected/highlighted text
`::marker`	Style list markers
`::placeholder`	Style input placeholder text

The content property is required for ::before and ::after to render.

Keep learning

Related tutorials from across the library.

All tutorials

Tutorial2026-05-30

Introduction to CSS

Learn what CSS is and why it matters

Web Development / Frontend / CSS

CSSWeb Development

Tutorial2026-05-30

History of CSS

Understand how CSS evolved

Web Development / Frontend / CSS

CSSWeb Development

Tutorial2026-05-30

Adding CSS

Three ways to add CSS to a page

Web Development / Frontend / CSS

CSSWeb Development