Difference Between Pseudo-Classes and Pseudo-Elements in CSS

Last Updated : 24 Jul, 2024

Pseudo-classes and pseudo-elements in CSS are selectors that allow the styling of specific states or parts of elements. Pseudo-classes target states like ': hover' or ': active', while pseudo-elements like ' ::before ' or:: after' style specific parts of an element. They enhance CSS styling by providing more granular control over elements' appearance based on user interactions or document structure. In this article, we will learn the differences between Pseduo-Classes and Psedu-Elements.

Note: The single colon : refers to pseudo-classes and The double colon :: refers to pseudo-elements

Pseudo-Classes

Pseudo-Classes in CSS selects the element and changes the state of the element based on the user interaction. For Example, Changing the color of the element when the user over it or when the user visits the link.

Syntax

selector: pseudo-class{
    property: value;
}

Example 1: The following example illustrates the: hover pseudo class.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <style>
        a{
            font-size: 50px;
            height: 30px;
            text-decoration: none;
        }
         a:hover{
             color: green;
         }
    </style>
</head>
  
<body>
     <a href="">GeekforGeeks</a>
</body>
  
</html>

Output:

Pseudo-Elements

The Pseduo-Elements in CSS is a keyword that is used to style specific part of the element.Pseudo-elements target a specific part of an element's content or structure. Pseudo-elements are denoted by a double colon (::) before the element they style. For Example. You can insert the content after or before the element using the Pseudo-Elements.

Syntax

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

Example 1: The following example demonstrates the simple Pseudo-Element in CSS.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <style>
       p::first-line{
        color: red;
       }
    </style>
</head>
  
<body>     
    <p>
        This is the first Pseudo element Class
        Some more text. And even more, and more, 
          and more, and more,  and more, and more,
        and more, and more, and more, and more, 
        and more, and more.
    </p>
</body>
  
</html>

Output: