Open In App
Related Articles

CSS Pseudo Elements

Improve Article
Improve
Save Article
Save
Like Article
Like

A CSS pseudo-element is a keyword added to a selector that 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:

  • ::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:

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:

  • ::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-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:

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:

  • ::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:

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:

  • ::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:

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:

  • ::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:

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: 

  • ::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:

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

GIF Output


Last Updated : 20 Jul, 2023
Like Article
Save Article
Similar Reads