Open In App

CSS Pseudo Elements

Improve
Improve
Like Article
Like
Save
Share
Report

CSS Pseudo Elements lets you style a specific part of the selected elements. For Example, Styling the first letter or line of an element, and Inserting content before or after the content of an element. All of these can be done using Pseudo Elements in CSS.

Note that in contrast to pseudo-elements, pseudo-classes can be used to style an element based on its state.

Syntax: 

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

There are many Pseudo Elements in CSS but the ones which are most commonly used are as follows:

 

CSS ::first-line Pseudo-element

Applies styles to the first line of a block-level element. Note that the length of the first line depends on many factors, including the width of the element, the width of the document, and the font size of the text. Note that only a few properties are applied for first-line pseudo-element like font properties, color properties, background properties, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear, etc.

Example: This example uses ::first-line selector to style the first line of paragraph.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>first-line Demo</title>
    <style>
        body {
            background-color: whitesmoke;
            color: green;
            font-size: large;
            text-align: center;
        }
          
        p::first-line {
            color: Red;
            font-weight: bold;
        }
    </style>
</head>
  
<body>
    <h1>Geeks For Geeks</h1>
    <h2>::first-line element</h2>
  
    <p>
        This is a paragraph using first-line
        pseudo-element to style first line of
        the paragraph. Content in the first 
        line turns red and becomes bold.
    </p>
  
</body>
  
</html>


Output:

CSS ::first-line Pseudo-element  Output

CSS ::first-letter Pseudo-element

Applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables). Note that only a few properties are applied for first-letter pseudo-element like font properties, color properties, background properties, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear, etc.

Example: This example uses ::first-letter selector to style the first letter of paragraph.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>first-letter Demo</title>
    <style>
        body {
            background-color: whitesmoke;
            color: green;
            font-size: large;
            text-align: center;
        }
          
        p::first-letter {
            color: Red;
            font-size: 30px;
            font-weight: bold;
        }
    </style>
</head>
  
<body>
    <h1>Geeks For Geeks</h1>
    <h2>::first-letter element</h2>
    <p>
        This is a paragraph using first-letter
        pseudo-element to style first letter
        of the paragraph. first-letter element
        turned the first letter of this paragraph
        to red and made it bold.
    </p>
  
</body>
  
</html>


Output:

CSS ::first-letter Pseudo-element Output

CSS ::before Pseudo-element

Creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

Example: This example uses ::before selector to style the first child of the element.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>before Demo</title>
    <style>
        body {
            background-color: whitesmoke;
            color: green;
            font-size: large;
            text-align: center;
        }
          
        p::before {
            content: '"';
            color: red;
            font-size: 30px;
        }
    </style>
</head>
  
<body>
    <h1>Geeks For Geeks</h1>
    <h2>::before element</h2>
  
    <p>
        This is a paragraph to which
        we added red color quotation
        marks using ::before element.
    </p>
  
</body>
  
</html>


Output:

CSS ::before Pseudo-element Output

CSS ::after Pseudo-element

Creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

Example: This example uses ::after selector to style the last child of element.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>after Demo</title>
    <style>
        body {
            background-color: whitesmoke;
            color: green;
            font-size: large;
            text-align: center;
        }
          
        p::after {
            content: '"';
            color: red;
            font-size: 30px;
        }
    </style>
</head>
  
<body>
    <h1>Geeks For Geeks</h1>
    <h2>::after element</h2>
  
    <p>
        This is a paragraph to which
        we added red color quotation
        marks using ::after element.
    </p>
  
</body>
  
</html>


Output:

CSS ::after Pseudo-element Output

CSS ::marker Pseudo-element

Selects the marker box of a list item, which typically contains a bullet or number. It works on any element or pseudo-element set to display: list-item, such as the <li> and <summary> elements.

Example: This example uses ::marker selector to style the bullet styles of a list.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>marker Demo</title>
    <style>
        body {
            background-color: whitesmoke;
            color: green;
            text-align: center;
        }
  
        ul {
            width: 40px;
        }
  
        ul li::marker {
            color: red;
            font-size: 30px;
        }
    </style>
</head>
  
<body>
    <h1>Geeks For Geeks</h1>
    <h2>::marker element</h2>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
  
</html>


Output: 

CSS ::marker Pseudo-element  Output

CSS ::selection Pseudo-element

Applies styles to the part of a document that has been highlighted by the user such as clicking and dragging the mouse across the text.

Example: This example uses ::selected selector to style the selected text in the elements.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>selection Demo</title>
    <style>
        body {
            background-color: whitesmoke;
            color: green;
            text-align: center;
        }
          
        p::selection {
            color: red;
            background-color: green;
            font-size: 30px;
        }
          
        ::selection {
            color: green;
            background-color: red;
            font-size: 30px;
        }
    </style>
</head>
  
<body>
    <h1>Geeks For Geeks</h1>
    <h2>::selection element</h2>
  
    <p>
        Content in this paragraph turns
        red with green background on selection.
    </p>
  
    <span>
        As this is not a paragraph, you can
        notice red background and green text on
        selection.
    </span>
</body>
  
</html>


Output:

giff1111

CSS ::selection Pseudo-element Output



Last Updated : 07 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads