CSS Pseudo-elements

CSS pseudo-elements are keywords added to selectors that allow you to style specific parts of an element. They create virtual elements that you can apply styles to, which are not part of the document tree but are styled as if they were. Pseudo-elements are useful for adding decorative elements or content without altering the HTML structure.

Common CSS Pseudo-elements

1. ::before

The `::before` pseudo-element allows you to insert content before the content of an element. It is often used for adding decorative elements or icons.

/* Before Pseudo-element */
.element::before {
    content: "★ ";
    color: gold;
}

        

2. ::after

The `::after` pseudo-element allows you to insert content after the content of an element. It can be used for adding additional styling or icons at the end of elements.

/* After Pseudo-element */
.element::after {
    content: " ✔";
    color: green;
}

        

3. ::first-line

The `::first-line` pseudo-element targets the first line of text within an element. It’s useful for styling the first line differently, such as for blockquotes or articles.

/* First-line Pseudo-element */
p::first-line {
    font-weight: bold;
    color: #333;
}

        

This paragraph demonstrates how the first line of text is styled differently from the rest.

4. ::first-letter

The `::first-letter` pseudo-element targets the first letter of a block-level element. It is often used for creating drop caps or styling the initial letter of an element.

/* First-letter Pseudo-element */
p::first-letter {
    font-size: 2em;
    color: #555;
}

        

This is an example where the first letter of the paragraph is styled differently.