ReviseAlgo Logo

Advanced CSS

Pseudo Elements

Master CSS Pseudo-elements, covering double colon notation, ::before and ::after decorators, content configurations, and custom design patterns.

Last Updated: July 15, 2026 • 10 min read

1. Learning Objectives

In this lesson, you will master creating virtual elements using CSS Pseudo-elements. By the end of this topic, you will be able to:

  • Differentiate between pseudo-classes (states) and pseudo-elements (virtual elements).
  • Understand the double colon (::) syntax required by modern browsers.
  • Insert custom decorative content using the ::before and ::after pseudo-elements.
  • Identify why the content property is required for pseudo-elements to render.
  • Position pseudo-elements relative to parent containers.
  • Style specific parts of elements using ::first-letter, ::placeholder, and ::selection.

2. Overview

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element. They can be used to style the first letter or line of a paragraph, insert virtual elements before or after an element's content, or customize inputs (like placeholder text or text selection highlights).

3. Why This Topic Matters

Pseudo-elements allow you to add decorative details to web pages without cluttering the HTML markup with extra tags:

  • Invisible Elements Bug: A common mistake is declaring styles on ::before or ::after but forgetting the content property. Without the content property (even if empty, like content: ""), the pseudo-element will not render.
  • Syntactic Standards: Using a single colon (:before) works in older browsers for compatibility, but using modern double colon notation (::before) is standard to distinguish pseudo-elements from pseudo-classes.

4. Real-World Analogy

Think of pseudo-elements like **adding temporary visual accessories to a mannequin inside a clothing store**:

  • The Mannequin (The Element): A static model on the showroom floor.
  • ::before (The Hat): Placing a hat on the mannequin's head (prepending content before the mannequin starts).
  • ::after (The Shoes): Placing shoes on the mannequin's feet (appending content after the mannequin ends).
  • The Content Property (The Accessory Pin): You must pin the hat or shoes to the mannequin. If you forget the pin (missing content property), the accessories slide off and disappear.

5. Core Concepts

Pseudo-elements generate virtual box layers inside the targeted element:

  • ::before: Inserts a virtual child box immediately before the element's actual content.
  • ::after: Inserts a virtual child box immediately after the element's actual content.
  • content property: Required for ::before and ::after to render. It can contain text strings, icon characters, or empty quotes ("") for empty decorative shapes.
  • ::selection: Matches the portion of an element that is highlighted by the user (e.g. dragging the cursor to select text).
Pseudo-Element Rendering Behavior Common Use Case
::before Generates a virtual child box before content. Custom bullet points, icon overlays.
::after Generates a virtual child box after content. Clearfix, custom dropdown arrows.
::first-letter Selects the first character of a block container. Drop caps styling in articles.
::selection Applies styles to text selected by the user. Custom branding background color highlight overrides.

6. Syntax & API Reference

Modern CSS uses the double colon (::) syntax to distinguish pseudo-elements from pseudo-classes:

7. Visual Diagram

This diagram displays how the browser appends virtual box layers inside an element:

8. Live Example — Full Working Code

A sample HTML document showcasing custom link underlines, drop caps, and selection highlight styles:

9. Interactive Playground

Try It Yourself Challenges:

  1. Change the selection highlight background color parameter and select text on the page to verify your changes.
  2. Test how removing the content: "" declaration from the link underline styles prevents the underline from rendering.

10. Common Mistakes

Mistake Why it happens Wrong Correct
Omitting the content property Forgetting the content property on ::before or ::after, preventing the elements from rendering. .icon::before { width: 10px; } .icon::before { content: ""; width: 10px; }
Confusing single and double colons Using single colons (like :before) for pseudo-elements. This works for compatibility, but using double colons is standard. a:before a::before

11. Best Practices

  • Always include the content property: Make sure to include the content property (even if empty, like content: "") when declaring ::before or ::after pseudo-elements.
  • Use double colons: Use double colons (::) for pseudo-elements (like ::before and ::after) and a single colon (:) for pseudo-classes (like :hover).
  • Keep content empty for decorative elements: When creating empty decorative shapes using pseudo-elements, keep the content property empty (content: "") to keep decorative styles separate from HTML markup.
  • Declare positions correctly: Use absolute positioning on pseudo-elements and set position: relative on the parent container to keep offsets bounded.

12. Browser Compatibility

Feature Chrome Firefox Safari Edge
::before and ::after support Supported (1+) Supported (1+) Supported (1+) Supported (12+)

13. Interview Questions

🟢 Q1: Why is the double colon syntax preferred over single colons for pseudo-elements?

Answer: The W3C introduced double colon notation (::) in CSS3 to distinguish pseudo-elements (which select virtual sub-elements, like ::before) from pseudo-classes (which select document states, like :hover). Browsers still support single colons for older elements for compatibility, but using double colons is standard.

14. Debugging Exercise

Identify why the quote mark decorator fails to render, and fix the CSS configuration:

View Solution

Diagnosis: The ::before pseudo-element lacks the required content property. Without the content property, the element will not render. To fix this, define the content property with a quotation mark string (content: "“").

Fixed CSS:

15. Practice Exercises

Exercise 1: Custom List Bullets

Build a list layout. Disable default bullet points using list-style-type: none, and use ::before to insert custom dashes or shapes before list items.

16. Scenario-Based Challenge

The Custom Tooltip Bubble Challenge:

An interactive maps dashboard needs custom tooltips when users hover over coordinates. The tooltips must display a small pointer arrow at the bottom of the bubble box. Propose an implementation plan using pseudo-elements to build this tooltip.

17. Quick Quiz

Q1: Which CSS property is required for ::before and ::after elements to render?

A) display

B) content

C) position

Answer: B — Without the content property, pseudo-elements will not render.

18. Summary & Key Takeaways

  • • Pseudo-elements insert virtual styling layers, allowing you to add details without extra HTML markup.
  • • Make sure to include the content property (even if empty, like content: "") in all ::before and ::after declarations.

19. Cheat Sheet

Property Visual Layout Action
::selection Allows customization of text selection highlight colors.