CSS Pseudo-elements

A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to style the first letter, or line, of an element, or to insert content before or after an element.

---

The Double Colon notation

In CSS3, pseudo-elements use a double colon (::) to distinguish them from pseudo-classes (:). However, most browsers still support the single colon notation for backward compatibility.

---

1. ::first-line and ::first-letter

These are used to create special typographical effects for paragraphs and text blocks.

p::first-letter {
    font-size: 30px;
    color: green;
}

p::first-line {
    font-style: italic;
}

---

2. ::before and ::after

These are the most powerful pseudo-elements. They can be used to insert content before or after an element's actual content. You must include the content property for them to appear.

h1::before {
    content: "Icon ";
    color: red;
}

h1::after {
    content: " [Link]";
    color: blue;
}

---

3. ::selection

This pseudo-element matches the portion of an element that is selected by the user (highlighted with the mouse).

::selection {
    background: #ffb7b7;
}

---

---