Tutorialspoint.dev

CSS | Pseudo Elements

Pseudo Elements: Pseudo-element in CSS is used to add style in specified parts of an element. Example: Using style before or after an element.

Syntax:

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

Use of Pseudo-Element: Below are some examples to describe the use of pseudo-element.

  • ::before Pseudo-element: It is used to add some CSS property before an element when that element is called.
    Example:

    <html>
    <head>
        <title>before</title>
        <style>
        h1::before {
            content: "Before element - ";
        }
        </style>
    </head>
    <body>
        <h1>GFG</h1>
        <p>It is a paragraph.</p>
        <p>This is another paragraph.</p>
    </body>
    </html>

    /div>

    Output:

  • ::after Pseudo-element: It is used to add some CSS property after an element when that element is called.
    Example:

    <html>
    <head>
        <title>after</title>
        <style>
        h1::after {
            content: " - after element";
        }
        </style>
    </head>
    <body>
        <h1>GFG</h1>
        <p>It is a paragraph.</p>
        <p>This is another paragraph.</p>
    </body>
    </html>

    Output:

  • ::first-letter Pseudo-element: It is used to make changes to the first letter of an element.
    Example:

    <html>
    <head>
        <title>after</title>
        <style>
        h1::first-letter {
            color: #ff0000;
        }
        </style>
    </head>
    <body>
        <h1>GFG</h1>
        <p>It is a paragraph.</p>
        <p>This is another paragraph.</p>
    </body>
    </html>

    Output:

  • ::first-line Pseudo-element: It is used to make changes to the first line of an element.
    Example:

    <html>
    <head>
        <title>after</title>
        <style>
        h1::first-line {
            color: #ff0000;
        }
        </style>
    </head>
    <body>
        <h1>GFG</h1>
        <p>It is a paragraph.</p>
        <p>This is another paragraph.</p>
    </body>
    </html>

    Output:



This article is attributed to GeeksforGeeks.org

You Might Also Like

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter