CSS Pseudo-Elements

    In this CSS tutorial, we will be discussing what are Pseudo-Elements in CSS and how can we use them to style specific HTML elements .

    What are Pseudo-Elements?

    Pseudo-Elements represents a special syntax that used with selectors to select the specific part of an element.  Pseudo Elements comes very useful when we only want to style some particular part of an element.

    Note : There are more than 14 pseudo-elements present in CSS, but every browser does not support many of them. Here in this article we have only mentioned the major ones which are supported by most of the browsers.

    Syntax: 

    That’s how you write a Pseudo-element.
selector::pseudo-element {
  property: value;
}

    Major Pseudo-Elements

    Pseudo-Elements Example Example description
    ::after p::after It selects the <p> elements and insert the content value after every paragraph.
    ::before p::before It selects the <p> elements and insert the content value before every paragraph.
    ::first-letter p::first-letter It selects the first letter of every <p> element.
    ::first-line p::first-line It selects the first line of every <p> element.
    ::selection p::selection It select the <p> element if the user use the cursor to select the portion of the paragraph.

    CSS ::after Pseudo-element

    Using the ::after pseudo-element we can select an element and put a extra content after it.

    syntax 

    p::after { property:value;}

    Example 

    <!DOCTYPE html>
<html>
    <head>
        <style>
        p::after {
          content: " Inserted Content";
        }
        </style>
    </head>
    <body>
    <p>This is a Normal Paragraph.</p>
    </body>
</html>

    CSS ::before Pseudo-Element

    The ::before pseudo-element is similar to ::after, but it inserts new content before an element.

    Syntax: 

    p::before {property:value;}

    Example 

    <!DOCTYPE html>
<html>
    <head>
        <style>
        p::before {
          content: " Inserted Content";
        }
        </style>
    </head>
    <body>
    <p>This is a Normal Paragraph.</p>
    </body>
</html>

    CSS ::first-letter Pseudo-Element

    As the name suggest the ::first-letter pseudo-element can selects the first letter of an element.

    Syntax 

    p::first-letter{property:value;}

    Example: 

    <!DOCTYPE html>
<html>
    <head>
        <style>
        p::first-letter {
          color: red;
        }
        </style>
    </head>
    <body>
    <p>This is a Normal Paragraph.</p>
    </body>
</html>

    CSS ::first-line Pseudo-letter

    The :: first-line pseudo-element can be used with any selector, and it selects the first text line of that element.

    Syntax 

    p::first-line {property:value;}

    Example 

    <!DOCTYPE html>
<html>
    <head>
        <style>
        p::first-line {
          color: red;
        }
        </style>
    </head>
    <body>
    <p>This is a Normal Paragraph.</p>
    </body>
</html>

    < Note >: You will see the changes if the <p> element would contain more than one line.

    CSS ::selection pseudo-element

    The ::selection pseudo-element select an element when the user uses the cursor to select the portion of that element.

    Syntax 

    p::selection {property:value;}

    Example 

    <!DOCTYPE html>
<html>
    <head>
        <style>
        p::selection {
          color: red;
          background-color: yellow;
        }
        </style>
    </head>
    <body>
    <p>Select this paragraph.</p>
    </body>
</html>

    Summary

    • Pseudo-elements are used along with selectors to select the specific part from an element itself.
    • ::after pseudo-element can insert content after an element.
    • ::before can insert content before an element.
    • ::first-line can select an element’s first Text line.
    • ::first-letter can select an element’s first letter.
    • ::selection selects an element when the user selects a portion of the element.
    Previous Tutorial Next Tutorial