CSS Pseudo Elements

CSS Pseudo Elements are special keywords that allow you to style a specific part of an element or create virtual elements before or after an element's content.

Why Use Pseudo Elements?

• Add decorative content without HTML.
• Style the first letter or first line of text.
• Create icons, badges, and labels.
• Reduce unnecessary HTML elements.
• Improve website design and readability.

p::first-letter{

    font-size:40px;

}

A pseudo element begins with two colons (::) and is used to style a particular part of an element or insert generated content.

selector::pseudo-element{

    property:value;

}

The ::before pseudo element inserts content before the actual content of an element.

h2::before{

    content:"★ ";

    color:gold;

}

button::before{

    content:"👉 ";

}

The ::after pseudo element inserts content after the content of an element.

h2::after{

    content:" ✓";

    color:green;

}

a::after{

    content:" ↗";

}

The ::first-letter pseudo element styles the first letter of a block-level element.

p::first-letter{

    font-size:40px;

    color:red;

    font-weight:bold;

}

article::first-letter{

    float:left;

    margin-right:5px;

}

The ::first-line pseudo element styles only the first line of a block-level element. The styled line changes automatically when the width of the element changes.

p::first-line{

    color:blue;

    font-weight:bold;

}

article::first-line{

    text-transform:uppercase;

}

The ::selection pseudo element styles the text selected by the user using the mouse or keyboard.

::selection{

    background:yellow;

    color:black;

}

p::selection{

    background:#007bff;

    color:white;

}

Example 1 : Add an Icon Before a Heading

h2::before{

    content:"📘 ";

}

Example 2 : Add a Check Mark After Text

.success::after{

    content:" ✔";

    color:green;

}

Example 3 : Style the First Letter

p::first-letter{

    font-size:35px;

    color:red;

}

Example 4 : Customize Selected Text

::selection{

    background:black;

    color:white;

}

• Reduce unnecessary HTML elements.
• Create decorative content easily.
• Improve typography.
• Enhance website appearance.
• Easy to maintain.
• Improve code readability.
• Support creative UI designs.

h3::before{

    content:"⭐ ";

}

h3::after{

    content:" ⭐";

}

Following best practices helps you create clean, maintainable, and attractive web pages using CSS Pseudo Elements.

• Use pseudo elements for decorative content only.
• Always use the content property with ::before and ::after.
• Keep generated content simple and meaningful.
• Use pseudo elements to reduce unnecessary HTML.
• Combine pseudo elements with transitions for better UI effects.
• Maintain accessibility by avoiding important information in generated content.
• Keep typography effects consistent.
• Test pseudo elements across different browsers.

❌ Poor

h2::before{

    color:red;

}

✔ Better

h2::before{

    content:"★ ";

    color:red;

}

CSS Pseudo Elements are fully supported by all modern web browsers.

1. What is a CSS pseudo element?
2. What is the purpose of the ::before pseudo element?
3. Why is the content property required?
4. What is the difference between ::before and ::after?
5. How does ::first-letter work?
6. What does ::first-line style?
7. What is the purpose of ::selection?
8. Can pseudo elements replace HTML elements?
9. Can pseudo elements be combined with pseudo classes?
10. Are CSS pseudo elements supported by modern browsers?

In this lesson, you learned:

• ✔ Introduction to CSS Pseudo Elements.
• ✔ What pseudo elements are.
• ✔ ::before pseudo element.
• ✔ ::after pseudo element.
• ✔ ::first-letter pseudo element.
• ✔ ::first-line pseudo element.
• ✔ ::selection pseudo element.
• ✔ Practical examples.
• ✔ Best Practices and Common Mistakes.
• ✔ Browser Support and Interview Questions.