CSS Pseudo-Element Selector

CSS pseudo-elements selectors select the specific part of HTML elements. For example,

h1::first-letter {
    color: red;
}

Browser Output

CSS Pseudo-Element Example

Here, first-letter pseudo-element selects the first letter of the h1 element and changes its color to red.


Syntax of Pseudo-Element Selector

The syntax of a pseudo-element selector is as follows:

element::pseudo-element {
  /* CSS styles */
}

Here,

  • element: specifies the HTML element
  • pseudo-element: specifies the specific part of the element that we want to target

Pseudo-element keywords are added to the selectors and preceded by a double colon (::).


Types of Pseudo-Elements

There are the following different types of pseudo-elements in CSS.

  • ::first-line: selects the first line of text within a block-element
  • ::first-letter: selects the first letter of text
  • ::before: inserts content before the actual content of element
  • ::after: inserts content after the actual content of element
  • ::marker: selects the marker of list elements
  • ::selection: styles the user selected part of HTML elements

Let's learn each of them in detail.


CSS first-line Pseudo- Element

The first-line pseudo-element selects and styles the first line of the text within the HTML elements. For example,

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS Pseudo-Elements</title>
    </head>

    <body>
        <p>
            We can use ::first-line pseudo-element to select and style
            the first line of the text within the HTML element. Here, the color
            of the first line is different from others.
        </p>
        <p>
            Let's add one more paragraph to visualize the changes in text color
            and understand the pseudo-element more clearly. Here, also only the first
            line will change its color to red.
        </p>
    </body>

</html>
p::first-line {
    color: red;
}

Browser Output

CSS first-line Pseudo-ElementExample

Here, the first-line pseudo-element selects the first line of all p elements and changes their color to red.


CSS first-letter Pseudo-Element

The first-letter pseudo-element selects and styles the first letter of the text within the HTML elements. For example,

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS Pseudo Elements</title>
    </head>

    <body>
        <p>
            We use ::first-letter pseudo-element to style the first
            letter of the text.
        </p>
    </body>

</html>
p::first-letter {
    color: orange;
    font-size: 32px;
    font-weight: bold;
}

Browser Output

CSS first-letter Pseudo-Element Example

Here, the first-letter pseudo-element selects and styles the first letter of p elements.


CSS before Pseudo-Element

The before pseudo-element is used to insert certain content before the actual content of an HTML element. For example,

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS Pseudo Elements</title>
    </head>

    <body>
        <h1> Pseudo Elements</h1>
    </body>

</html>
h1::before {
    content: "Let's learn ";
    color: red;
}

Browser Output

CSS before Pseudo-Element Example

Here, the before pseudo-element inserts the new content before the original content of h1 element.

Note: The before pseudo-element can also be used to insert images before an HTML element.


CSS after Pseudo-Element

The after pseudo-element is used to insert certain content after the actual content of an HTML element. For example,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS Pseudo Elements</title>
    </head>

    <body>
        <h1>Let's learn</h1>
    </body>
</html>
h1::after {
    content: " Pseudo Elements";
    color: orange;
}

Browser Output

CSS after Pseudo-Element Example

Here, the after pseudo-element inserts the new content after the original content of h1 element.


CSS marker Pseudo-Element

The marker pseudo-element selects and styles the markers of the list items. For example,

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS Pseudo Elements</title>
    </head>

    <body>
        <ul>
            <li>First</li>
            <li>Second</li>
            <li>Third</li>
        </ul>
    </body>

</html>
li::marker {
    color: red;
}

Browser Output

CSS marker Pseudo-ElementExample

Here, the marker pseudo-element selects the marker of all the list items and changes their color to red.


CSS selection Pseudo-Element

The selection pseudo-element styles the user selected part of the HTML element. For example,

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS Pseudo Elements</title>
    </head>

    <body>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
        </p>
    </body>

</html>
p::selection {
    background-color: greenyellow;
}

Browser Output

CSS selection Pseudo-Element Example

Here, the selection pseudo-element styles the user selected part of the p element and changes its color to greenyellow.

Our premium learning platform, created with over a decade of experience and thousands of feedbacks.

Learn and improve your coding skills like never before.

Try Programiz PRO
  • Interactive Courses
  • Certificates
  • AI Help
  • 2000+ Challenges