CSS Pseudo-elements Selector

Pseudo-elements selectors in CSS allow you to target and style specific parts of an element.

Pseudo-elements are denoted with a double colon (::) followed by the name of the pseudo-element.

Here are a few examples of pseudo-elements selectors and how they can be used for element manipulation:

::before Pseudo-element:

        
            .box::before {
    content: "Before";
    font-weight: bold;
}
        
    

In this example, the ::before pseudo-element targets the "before" content of elements with the class "box". It adds the text "Before" before the content of those elements and sets the font weight of the content to bold.

::after Pseudo-element

        
            .button::after {
   content: "→";
}
        
    

Here, the ::after pseudo-element targets the "after" content of elements with the class "button". It adds a right arrow (→) after the content of those elements.

::first-line Pseudo-element

        
            p::first-line {
   font-size: 18px;
   font-weight: bold;
}
        
    

In this example, the ::first-line pseudo-element targets the first line of text within <p> elements. It increases the font size and sets the font weight of the first line of text to bold.

::selection Pseudo-element

        
            p::selection {
    background-color: yellow;
    color: black;
}
        
    

Here, the ::selection pseudo-element targets the selected text within <p> elements. It sets the background color to yellow and the text color to black when the text is selected.