Pseudo-Elements

1. ::before

Inserts content BEFORE an element's content.

This paragraph has a star before it

/* ::before - inserts content before */
p::before {
content: "⭐ ";
}

2. ::after

Inserts content AFTER an element's content.

This paragraph has a star after it

/* ::after - inserts content after */
p::after {
content: " ⭐";
}

3. ::before + ::after Together

This paragraph has diamonds on both sides

/* Both ::before and ::after */
p::before { content: "🔹 "; }
p::after { content: " 🔹"; }

4. Icons with ::before (No extra HTML)

Add icons to list items without changing HTML.

Completed task
Another completed task
Third task done

/* Add checkmark icons to all list items */
li::before {
content: "✅";
margin-right: 10px;
}

5. Badge Effect with ::before

Create a "NEW" badge on any element.

Special Offer!

/* Badge with ::before */
.badge-demo {
    position: relative;
}
.badge-demo::before {
    content: "NEW";
    position: absolute;
    top: -10px;
    right: -10px;
    background: green;
    padding: 4px 8px;
    border-radius: 20px;
}

6. ::first-letter

Styles the first letter of a text block (like drop caps).

This paragraph has a large first letter. It looks like a drop cap from old books.

/* ::first-letter - drop cap effect */
p::first-letter {
    font-size: 48px;
    font-weight: bold;
    color: #e94560;
}

7. ::first-line

Styles the first line of a text block.

This is the first line of this paragraph. The first line will be bold and blue. The rest of the text will be normal. Resize your browser to see the first line change.

/* ::first-line - styles first line only */
p::first-line {
font-weight: bold;
color: #4a90e2;
}

8. ::selection

Styles text when highlighted by the user.

Select (highlight) this text. The background will turn pink and text white!

/* ::selection - when user highlights text */
p::selection {
background-color: #e94560;
color: white;
}

9. ::placeholder

Styles placeholder text in inputs.

/* ::placeholder - styles hint text in inputs */
input::placeholder {
color: #888;
font-style: italic;
}

10. ::marker

Styles bullet points or numbers in lists.

First item with custom bullet color
Second item
Third item

/* ::marker - style list bullets/numbers */
li::marker {
color: #e94560;
font-size: 18px;
}

11. ::backdrop

Styles the background behind a dialog or modal.

/* ::backdrop - behind modal/dialog */
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.8);
}

12. Practical: Quote Box with ::before and ::after

The only way to do great work is to love what you do.

/* Quote box with quotation marks */
.quote-demo {
    position: relative;
}
.quote-demo::before {
    content: "“";
    font-size: 60px;
    position: absolute;
    top: -10px;
    left: 10px;
}
.quote-demo::after {
    content: "”";
    font-size: 60px;
    position: absolute;
    bottom: -30px;
    right: 10px;
}

📚 Pseudo-Elements Quick Reference

/* =================================== PSEUDO-ELEMENTS (:: two colons) =================================== */ ::before /* Insert content BEFORE element */
::after /* Insert content AFTER element */
::first-letter /* First letter of text block */
::first-line /* First line of text block */
::selection /* Highlighted text */
::placeholder /* Input placeholder text */
::marker /* List bullet points/numbers */
::backdrop /* Behind modal/dialog */
::file-selector-button /* Style file upload button */

/* =================================== IMPORTANT RULES =================================== */ /* 1. content property is REQUIRED for ::before and ::after */
.element::before { content: ""; } /* Must have content */

/* 2. Two colons :: is modern syntax (CSS3) */
/* One colon : is older syntax (CSS2) - still works */

/* 3. ::before and ::after work on most elements, but not all */
/* Does NOT work on: img, input, textarea, select, br, hr */

/* =================================== COMMON USE CASES =================================== */ /* Icons before list items */
li::before { content: "✓ "; }

/* Badges on elements */
.element::before { content: "NEW"; position: absolute; }

/* Drop caps (old book style) */
p::first-letter { font-size: 48px; font-weight: bold; }

/* Custom placeholder style */
input::placeholder { color: gray; font-style: italic; }

🔄 Pseudo-Class vs Pseudo-Element

/* =================================== PSEUDO-CLASSES (one colon :) Target a STATE of an element =================================== */ :hover /* Mouse over */
:focus /* Focused */
:first-child /* Position in parent */
:nth-child() /* Position in parent */

/* =================================== PSEUDO-ELEMENTS (two colons ::) Target a PART of an element =================================== */ ::before /* Inserted content before */
::after /* Inserted content after */
::first-letter /* First letter */
::selection /* Highlighted text */

/* =================================== QUICK EXAMPLE =================================== */ /* Pseudo-class - targets STATE */
button:hover { background: red; }

/* Pseudo-element - targets PART */
p::first-letter { font-size: 48px; }

🧠 Quick Quiz

/* Question 1: What pseudo-element inserts content BEFORE an element? */ /* Answer: ::before */ /* Question 2: What property is REQUIRED for ::before and ::after? */ /* Answer: content */ /* Question 3: What pseudo-element styles highlighted text? */ /* Answer: ::selection */ /* Question 4: What is the difference between :first-child and ::first-letter? */ /* Answer: :first-child is a pseudo-class (state/position). ::first-letter is a pseudo-element (part of element). */ /* Question 5: Can ::before work on an tag? */ /* Answer: No. Does not work on self-closing tags like img, input, br, hr */

✨ CSS Pseudo-Elements Reference

Modal Dialog