HTML & CSS Interview Question #58

What are pseudo-elements in CSS?

CSS Fundamentals, Selectors, Cascade, Specificity, Box Model, Units & Typography Mid-Level Intermediate

Quick Interview Answer

Pseudo-elements style a particular part of an element or create a generated box associated with it. Common examples include ::before, ::after, ::first-letter, ::first-line, ::marker, and ::selection.

Detailed Explanation

Pseudo-elements style a particular part of an element or create a generated box associated with it. Common examples include ::before, ::after, ::first-letter, ::first-line, ::marker, and ::selection.

Generated content from ::before and ::after is useful for decorative presentation, but essential information should normally remain in the HTML because generated CSS content can have accessibility and usability limitations.

Code Example

.required-label::after {
    content: " *";
}

.article p::first-letter {
    font-size: 2rem;
    font-weight: 700;
}

li::marker {
    font-weight: bold;
}