CSS Pseudo-elements: Styling Parts of an Element
Pseudo-elements style parts of an element not in the DOM, like a paragraph's first line or selected text. Use ::before/::after for decorative content or ::selection to style user highlights.
Why it exists
CSS needs a way to target and style document fragments that aren't represented by a specific HTML tag. For example, there's no <first-line> tag, but designers often want to style it. Pseudo-elements solve this by creating styleable "hooks" for these browser-managed parts of an element.
The mental model
A pseudo-element is a keyword added to a selector that lets you style a specific part of an element as if it were a separate, virtual child. It's not actually in the DOM tree, but the browser's rendering engine treats it like a distinct box for styling purposes. For example, p::first-line doesn't select a real element, but a browser-calculated portion of the paragraph's text.
How it works
You append a pseudo-element to a selector using a double colon, like selector::pseudo-element. The browser identifies this "originating element" and then applies the specified styles to the designated part. These styles are dynamic; if a window resize changes which text falls on the first line, the ::first-line styles are automatically reapplied to the new content. The modern :: syntax distinguishes them from pseudo-classes, which use a single colon (:).
When to use it
Use pseudo-elements for styling that isn't tied to a specific DOM element. Three common cases: first, adding decorative content or icons next to an element using ::before and ::after; second, creating typographic effects like drop caps with ::first-letter; third, customizing browser UI states like text selection with ::selection or spelling errors with ::spelling-error.
When not to use it
Avoid pseudo-elements for meaningful content that should be accessible or indexed; use real HTML for that. You cannot attach JavaScript event listeners to them, as they are not in the DOM. Crucially, you cannot select children of a pseudo-element (e.g., p::first-line > * is invalid) because it has no children.
One canonical example
To create a "drop cap" effect, you can use the ::first-letter pseudo-element. The CSS p::first-letter { font-size: 3em; font-weight: bold; color: #8A2BE2; float: left; margin-right: 0.1em; } will select the first letter of any paragraph, making it a large, bold, purple, floating character that text wraps around.
Interview question
What is a direct consequence of CSS pseudo-elements not being part of the standard Document Object Model (DOM)?
- a.They cannot inherit styles from their parent element.
- b.Their content is always static and cannot be dynamically generated.
- c.They cannot be directly selected or manipulated by JavaScript.Correct
- d.They are rendered by the browser's JavaScript engine, not the CSS rendering engine.
Why? this is the answer
The card states, "You cannot attach JavaScript event listeners to them, as they are not in the DOM," directly linking their non-DOM status to JavaScript manipulation limitations. Distractor C is incorrect because the card mentions their styles are dynamic, adapting to layout changes.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #css
- #selectors
- #design-systems
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles