CSS Pseudo-elements: The Virtual DOM Expander
Why clutter your HTML with endless empty <div> tags and spans for decorative icons? Pseudo-elements let you insert and style virtual elements entirely from your CSS.
Typographic Precision
Pseudo-elements originated as a way to style specific parts of existing text. Instead of wrapping the first letter of a paragraph in a span, you use ::first-letter. Similarly, ::first-line targets the first line of text, dynamically updating as the browser window resizes!
Generated Content: ::before and ::after
These are the workhorses of CSS pseudo-elements. They allow you to create an element that is the first child (::before) or last child (::after) of the selected element.
The Golden Rule: They will NOT render on the screen unless you include the content property. Even if you just want to draw a geometric shape, you must write content: "";.
Styling UI States: ::selection & ::placeholder
Pseudo-elements aren't just for adding boxes. They style native browser UI elements.
- ::selection: Changes the background and text color when a user highlights text. Note: You can only change
color,background,cursor, and a few text properties here. - ::placeholder: Allows you to style the placeholder text inside form inputs, changing its opacity or color to match your design system.
View Accessibility Tips+
Screen Readers and Generated Content. Modern screen readers often announce the text injected via the content property. If you are using ::before to inject a decorative icon using an icon font (e.g., content: "\f001";), this might be read aloud as random characters. If it's purely decorative, use empty content and add a background image, or ensure your actual HTML element has proper aria-hidden or aria-label attributes.
❓ Frequently Asked Questions
What is the difference between pseudo-classes (:) and pseudo-elements (::)?
Pseudo-classes (Single colon ':'): They select an element based on its current state. Examples: `:hover` (when the mouse is over it), `:focus` (when the element is selected/active), or `:first-child`.
Pseudo-elements (Double colon '::'): They allow you to style a specific part of an element or create a "virtual" sub-element in the DOM. Examples: `::before`, `::after`, or `::first-letter`. CSS3 introduced the double-colon syntax to distinguish them from classes.
I added `::before` but nothing appears on the screen. Why?
The number one mistake when using `::before` or `::after` is forgetting the content property. Without it, the pseudo-element will not render.
Ensure you have at least `content: "";` if you only want to create a decorative block. Also, verify that you are applying it to an element that can contain children (an `input` or `img`, for example, cannot have ::before/::after pseudo-elements because they don't have internal content).
Can you animate pseudo-elements?
Absolutely! You can apply `transition` or `@keyframes` animations to your `::before` and `::after` elements.
.btn::after {content: ""; transition: transform 0.3s ease;}.btn:hover::after {transform: scale(1.5);}