✨ CSS Pseudo-Elements — Master Guide with Separated CSS Examples

CSS pseudo-elements let you style specific hidden or structural partsof an element — decorations, text highlights, markers, captions, and even internal shadow DOM. Below is a beautifully organized guide where each pseudo-element gets its own dedicated CSS snippet for perfect clarity. 🌟

📌 Complete Pseudo-Element Reference

Pseudo-ElementPurpose
::beforeAdd decorative or generated content before an element
::afterAdd generated content after an element
::first-letterStyle the first letter (drop caps)
::first-lineStyle the first line of text
::selectionCustomize text highlight
::placeholderStyle the placeholder of inputs
::markerStyle list bullets or numbers
::backdropStyle the modal/dialog backdrop
::file-selector-buttonStyle the internal button in file inputs
::target-textHighlight URL-fragment selected text
::cueStyle subtitle captions inside videos
::cue-regionStyle the entire caption region
::part()Style shadow DOM parts (Web Components)
::slotted()Style slotted content in shadow DOM

Note

💡 Pseudo-elements are perfect for UI decoration, accessibility improvements, and dynamic generated content—all without adding extra HTML!

🎨 Individual CSS Snippets (Each Explained)

1️⃣ ::before — Add Content Before Elements

Commonly used for ribbons, labels, decorative bars, and icons.

::before

.box::before {
  content: '';
  width: 100%;
  height: 20px;
  background: #ff4757;
  position: absolute;
  top: 0;
  left: 0;
}

2️⃣ ::after — Add Content After Elements

Great for tooltips, badges, underlines, and overlays.

::after

.box::after {
  content: '';
  width: 100%;
  height: 20px;
  background: #ff4757;
  position: absolute;
  bottom: 0;
  left: 0;
}

3️⃣ ::first-letter — Stylish Drop Caps

Create magazine-style first-letter typographic effects.

::first-letter

p::first-letter {
  font-size: 40px;
  font-weight: bold;
  color: red;
}

4️⃣ ::first-line — Style the Leading Line

Perfect for article intros and visually distinct opening lines.

::first-line

p::first-line {
  color: blue;
  font-style: italic;
}

5️⃣ ::selection — Custom Highlight Color

Change how text looks when users select it.

::selection

p::selection {
  background-color: #222f3e;
  color: white;
}

6️⃣ ::placeholder — Style Placeholder Text

Improve the visual style and clarity of input hints.

::placeholder

input::placeholder {
  color: teal;
  font-style: italic;
}

7️⃣ ::marker — Style List Bullets

Customize bullet shapes, colors, and sizes.

::marker

li::marker {
  color: purple;
  font-size: 1.3rem;
}

8️⃣ ::backdrop — Style Modal Background

Applies when using the <dialog> element.

::backdrop

dialog::backdrop {
  background: rgba(0,0,0,0.6);
}

9️⃣ ::file-selector-button — Modern Form Styling

Gives full control over the hidden file input button.

::file-selector-button

input[type="file"]::file-selector-button {
  background: #ff4757;
  color: white;
  border: none;
  padding: 6px 12px;
  cursor: pointer;
}

🔟 ::target-text — Highlight Fragment-Linked Text

Used when linking to text fragments like #targetText.

::target-text

p::target-text {
  background: yellow;
  font-weight: bold;
}

1️⃣1️⃣ ::cue — Style Video Subtitles

Enhance readability of subtitles in <video> elements.

::cue

video::cue {
  color: yellow;
  background: rgba(0, 0, 0, 0.6);
}

1️⃣2️⃣ ::cue-region — Style Subtitle Region

Controls layout area where captions appear.

::cue-region

video::cue-region {
  background: rgba(0,0,0,0.4);
}

1️⃣3️⃣ ::part() — Shadow DOM Styling

Used when Web Components explicitly expose internal parts.

::part()

custom-element::part(header) {
  background: #333;
  color: white;
}

1️⃣4️⃣ ::slotted() — Style Slotted Content

Targets light DOM elements inserted inside a Shadow DOM slot.

::slotted()

custom-element::slotted(span) {
  color: purple;
}

🔥 Summary

With pseudo-elements, you gain control over invisible UI layers— letting you build beautiful, semantic, highly functional designs without extra markup.

>>“Master pseudo-elements, and you master the art of styling without adding extra HTML.”
✨ CSS Pseudo-Element Selectors — Complete Tutorial

🌐 What Are Pseudo-Elements?

A pseudo-element lets you style and insert content into specific parts of an element — such as the first letter, the first line, or even a virtual element before/after the content.

>>“Pseudo-elements let you style pieces of an element that don’t exist as actual HTML.”

Note

✔ Pseudo-elements start with :: (double colon)
✔ They act as virtual elements inside real elements
✔ Commonly used for decorative content, typography, highlights, and UI indicators

📦 List of Major CSS Pseudo-Elements

Pseudo-elementUsage
::beforeInsert content before an element
::afterInsert content after an element
::first-letterStyle the first letter of text
::first-lineStyle the first line of text
::selectionStyle the text selected by user
::markerStyle list item bullets/numbers
::placeholderStyle placeholder text in inputs
::backdropStyle fullscreen modal/backdrop background
::cueStyle text inside WebVTT captions

🎨 1. ::before

Inserts content before an element. Requires content: "";.

::before Example

h2::before {
  content: "👉 ";
  color: orange;
}

🎨 2. ::after

Inserts content after an element.

::after Example

button::after {
  content: " 🔥";
}

🔠 3. ::first-letter

First Letter Styling

p::first-letter {
  font-size: 2rem;
  font-weight: bold;
}

Great for stylized article intros (like magazines).

📄 4. ::first-line

First Line Styling

p::first-line {
  text-transform: uppercase;
  letter-spacing: 2px;
}

🎯 5. ::selection

Styles the text the user highlights using their cursor.

Selection Styling

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

🔹 6. ::marker

Styles the bullet or numbering of lists.

Marker Example

li::marker {
  color: red;
  font-size: 1.2rem;
}

💬 7. ::placeholder

Placeholder Example

input::placeholder {
  color: gray;
  opacity: 0.6;
}

🖼️ 8. ::backdrop

Applies to elements in fullscreen mode or modals (like dialog).

Backdrop Example

dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

🎧 9. ::cue

Applies to captions in WebVTT (video subtitles).

Cue Example

::cue {
  color: yellow;
  background: black;
}

🧪 Practical Examples

✔ Adding Decorative Icons

Icon Decoration

.note::before {
  content: "💡 ";
  font-size: 1.2rem;
}

✔ Custom Quote Block

Quote Example

blockquote::before {
  content: "“";
  font-size: 2rem;
  color: #ccc;
}

blockquote::after {
  content: "”";
  font-size: 2rem;
  color: #ccc;
}

✔ Button Loading State

Button Loading

.loading::after {
  content: "...";
  animation: blink 1s steps(3) infinite;
}

✔ List Number Styling

Fancy Lists

ol li::marker {
  font-weight: bold;
  color: purple;
}

✔ Highlighted First Letter for Articles

First Letter Article

article p::first-letter {
  float: left;
  font-size: 3rem;
  padding-right: 8px;
}

🧠 How Pseudo-Elements Work Internally

  • The browser creates a virtual element inside the real element
  • Pseudo-elements can be styled like real elements
  • ::before and ::after require content property
  • You can position pseudo-elements using absolute positioning

⚠️ Common Mistakes

  • ❌ Forgetting content:"" in ::before and ::after
  • ❌ Trying to wrap pseudo-elements around elements (not possible)
  • ❌ Expecting ::first-letter to work on inline elements
  • ❌ Treating ::placeholder like normal text (it’s not selectable!)

Note

✔ Pseudo-elements are NOT actual DOM elements — they exist only for styling.

🔥 Summary

Pseudo-elements such as ::before, ::after, ::first-letter, and ::selection give CSS the power to create elegant UI, decorative elements, and typography effects without adding extra HTML.

>>“Pseudo-elements help you create more with less HTML.”

Learn more →MDN Docs 📘