CSS Pseudo-elements

CSS pseudo-elements allow you to style specific parts of an element or insert content without modifying the HTML structure. They are defined using a double colon (::) before the pseudo-element name.

Basic Syntax

selector::pseudo-element {
  property: value;
}

Commonly Used Pseudo-elements

  1. ::before
    • Description: Inserts content before the content of the selected element.
    • Key Points:
      • Requires the content property to display content.
      • Does not affect the actual DOM structure.
    • Example: 
      h1::before {
  content: "★ ";
  color: gold;
}

      Try It Now

  2. ::after
    • Description: Inserts content after the content of the selected element.
    • Key Points:
      • Like ::before, requires the content property.
    • Example: 
      h1::after {
  content: " ★";
  color: gold;
}

      Try It Now

  3. ::first-line
    • Description: Styles the first line of a block-level element.
    • Key Points:
      • Limited to certain properties like color, font, letter-spacing, line-height, etc.
    • Example: 
      p::first-line {
  font-weight: bold;
  color: blue;
}

      Try It Now

  4. ::first-letter
    • Description: Styles the first letter of a block-level element.
    • Key Points:
      • Useful for drop caps or decorative effects.
      • Limited to certain properties like font, color, float, etc.
    • Example: 
      p::first-letter {
  font-size: 2em;
  color: red;
}

      Try It Now

  5. ::selection
    • Description: Styles the part of an element that is selected by the user (e.g., highlighted text).
    • Key Points:
      • Limited to certain properties like color, background, etc.
    • Example: 
      p::selection {
  background: yellow;
  color: black;
}

      Try It Now

  6. ::marker
    • Description: Styles the markers of list items (e.g., bullets or numbers).
    • Key Points:
      • Useful for customizing list styles.
    • Example: 
      li::marker {
  color: red;
  font-size: 1.5em;
}

      Try It Now

       

  7. ::placeholder
    • Description: Styles the placeholder text in input or textarea elements.
    • Key Points:
      • Supported for form controls with placeholders.
    • Example: 
      input::placeholder {
  color: gray;
  font-style: italic;
}

      Try It Now

  8. ::backdrop
    • Description: Styles the backdrop of a modal element (e.g., dialog).
    • Key Points:
      • Used in conjunction with the <dialog> element.
    • Example: 
      dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

      Try It Now

Difference Between Pseudo-classes and Pseudo-elements

Pseudo-class Pseudo-element
Uses a single colon (:). Uses a double colon (::).
Targets a state of an element (e.g., :hover). Targets a specific part of an element (e.g., ::before).
Dynamic in nature. Static, does not depend on user interaction.

Combining Pseudo-elements with Selectors

You can combine pseudo-elements with other selectors or pseudo-classes for advanced styling.

Example:

p:hover::after {
  content: " (hovered)";
  color: green;
}

Try It Now

Comprehensive example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="title" content="CSS Pseudo-classes and Pseudo-elements Guide">
    <meta name="description" content="Learn how to use CSS pseudo-classes and pseudo-elements to style elements dynamically and target specific parts of elements.">
    <title>CSS Pseudo-classes & Pseudo-elements Example</title>
    <style>
        /* Button hover effect for better interaction */
        button:hover {
            background-color: lightblue;
        }
        
        /* Focus effect for input fields */
        input:focus {
            border: 2px solid blue;
        }
        
        /* Active link styling */
        a:active {
            color: red;
        }
        
        /* Styling for first child of a list */
        li:first-child {
            font-weight: bold;
        }
        
        /* Second list item styling */
        li:nth-child(2) {
            color: green;
        }
        
        /* Styling for an only child paragraph */
        p:only-child {
            text-align: center;
        }
        
        /* Checked input styling */
        input:checked {
            outline: 2px solid green;
        }
        
        /* Disabled input field styling */
        input:disabled {
            background-color: lightgray;
        }
        
        /* Required input field styling */
        input:required {
            border: 1px solid red;
        }
        
        /* Link styles */
        a:link {
            color: blue;
        }
        a:visited {
            color: purple;
        }
        
        /* Inactive div styling */
        div:not(.active) {
            opacity: 0.5;
        }
        
        /* Hide empty paragraphs */
        p:empty {
            display: none;
        }
        
        /* Root variable usage */
        :root {
            --main-color: blue;
        }
        
        /* First-of-type styling */
        div:first-of-type {
            border: 1px solid black;
        }
        
        /* Styling for the second last list item */
        li:nth-last-child(2) {
            color: orange;
        }
        
        /* Active hover effect on links */
        a:hover:active {
            color: red;
        }
        
        /* Adding stars before and after heading */
        h1::before {
            content: "★ ";
            color: gold;
        }
        h1::after {
            content: " ★";
            color: gold;
        }
        
        /* First line styling for paragraphs */
        p::first-line {
            font-weight: bold;
            color: blue;
        }
        
        /* First letter styling for paragraphs */
        p::first-letter {
            font-size: 2em;
            color: red;
        }
        
        /* Selection styling */
        p::selection {
            background: yellow;
            color: black;
        }
        
        /* Customizing list markers */
        li::marker {
            color: red;
            font-size: 1.5em;
        }
        
        /* Placeholder styling */
        input::placeholder {
            color: gray;
            font-style: italic;
        }
        
        /* Backdrop styling for modals */
        dialog::backdrop {
            background-color: rgba(0, 0, 0, 0.5);
        }
        
        /* Hover effect with additional content */
        p:hover::after {
            content: " (hovered)";
            color: green;
        }
    </style>
</head>
<body>
    <h2>Try CSS Pseudo-classes & Pseudo-elements</h2>
    
    <!-- Button to demonstrate :hover pseudo-class -->
    <button>Hover me</button>
    
    <!-- Input field to demonstrate :focus pseudo-class -->
    <input type="text" placeholder="Focus on me">
    
    <!-- Anchor link to demonstrate :active pseudo-class -->
    <a href="#">Click me</a>
    
    <!-- Unordered list to demonstrate structural pseudo-classes -->
    <ul>
        <li>First item</li> <!-- :first-child applies here -->
        <li>Second item</li> <!-- :nth-child(2) applies here -->
        <li>Third item</li>
    </ul>
    
    <!-- Paragraph to demonstrate :only-child pseudo-class -->
    <p>Only child paragraph</p>
    
    <!-- Checkbox to demonstrate :checked pseudo-class -->
    <input type="checkbox" checked> Checked
    
    <!-- Disabled and required input fields -->
    <input type="text" disabled placeholder="Disabled">
    <input type="text" required placeholder="Required">
    
    <!-- Div with class inactive to demonstrate :not pseudo-class -->
    <div class="inactive">Not active</div>
    
    <!-- Empty paragraph to demonstrate :empty pseudo-class -->
    <p></p>
    
    <!-- Heading with pseudo-elements demonstration -->
    <h1>Heading with pseudo-elements</h1>
    
    <!-- Paragraph to demonstrate ::first-letter, ::first-line, and ::selection -->
    <p>This is a paragraph demonstrating pseudo-elements.</p>
    
    <!-- Dialog element to demonstrate ::backdrop pseudo-element -->
    <dialog id="example-dialog">
        <p>This is a modal dialog.</p>
        <button onclick="document.getElementById('example-dialog').close()">Close</button>
    </dialog>
    <button onclick="document.getElementById('example-dialog').showModal()">Open Dialog</button>
</body>
</html>

Try It Now

Browser Support

  • Most pseudo-elements (::before, ::after, ::first-line, etc.) are widely supported.
  • Newer pseudo-elements like ::marker and ::backdrop may require testing for compatibility in older browsers.