CSS

A pseudo-element in CSS is used to style specific parts of an element. They allow you to insert content or style only certain portions of an element without modifying the HTML.

---

🔹 1. ::before and ::after (Adding Content)

These pseudo-elements allow you to insert extra content before or after an element.

✅ Example: Adding an Icon Before Text

button::before {
    content: "🔥 ";
    font-size: 20px;
}

🔹 This will add “🔥” before every <button>.

---

✅ Example: Adding Content After a Link

a::after {
    content: " 🔗";
}

🔹 Adds a small 🔗 icon after each link.

---

🔹 2. ::first-letter (Styling the First Letter)

This pseudo-element styles the first letter of a block of text.

✅ Example: Large First Letter

p::first-letter {
    font-size: 2em;
    color: red;
}

🔹 First letter of the paragraph will be larger and red.

---

🔹 3. ::first-line (Styling the First Line)

This pseudo-element styles only the first line of a paragraph.

✅ Example: Styling First Line

p::first-line {
    font-weight: bold;
    color: blue;
}

🔹 First line of the paragraph becomes bold and blue.

---

🔹 4. ::selection (Highlight Text Color)

Changes the background and text color when a user selects text.

✅ Example: Custom Highlight Color

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

🔹 Selected text will have a yellow background instead of the default blue.

---

🔹 5. ::placeholder (Styling Placeholder Text)

Used to style the placeholder text inside input fields.

✅ Example: Custom Placeholder Style

input::placeholder {
    color: gray;
    font-style: italic;
}

🔹 Changes the color and style of placeholder text in input fields.

---

🔹 6. ::marker (Styling List Markers)

This pseudo-element styles bullets or numbers in lists.

✅ Example: Custom List Bullet Color

li::marker {
    color: red;
    font-size: 20px;
}

🔹 Makes bullets red and bigger in <ul> lists.

---

📌 Summary Table of CSS Pseudo-Elements

Pseudo-Element	Description
::before	Inserts content before an element
::after	Inserts content after an element
::first-letter	Styles only the first letter of text
::first-line	Styles only the first line of text
::selection	Changes highlight color when text is selected
::placeholder	Styles placeholder text inside inputs
::marker	Styles list bullets or numbers

---

📌 Conclusion

CSS pseudo-elements help in styling specific parts of elements without extra HTML.
They are useful for adding icons, modifying text appearance, and customizing user interactions.