CSS pseudo-elements are special selectors that let you style specific parts of an element’s content — parts that you can’t normally target directly with HTML or regular selectors.
What Pseudo-Elements Actually Do:
Pseudo-elements create virtual elements that don’t exist in your HTML, but behave like real ones in the CSS rendering layer.
They:
Don’t appear in the DOM.
Can be styled like regular elements (color, background, position, etc.).
Often used to add decoration or structure without extra markup.
Syntax:
CSS3 introduced the **double-colon (::)** notation to distinguish pseudo-elements from pseudo-classes (like :hover), though most browsers still support the single-colon form for backward compatibility:
p::first-line {
color: blue;
}
🔹 Difference Between Pseudo-Classes and Pseudo-Elements:
Type
Example
Targets
Pseudo-Class
a:hover
State of an element
Pseudo-Element
p::after
Part of an element
Limitations:
You can only have two **content-generating** pseudo-elements per element (::before and ::after).
Pseudo-elements cannot wrap real elements — they live inside or around them, not across siblings.
Not all CSS properties are supported (e.g., ::first-line can’t use margin).
Complete Pseudo-element Reference (20 Total):
Pseudo-Element
Description
::before
Inserts generated content **before** an element’s content.
::after
Inserts generated content **after** an element’s content.
::first-line
Styles only the **first line** of an element’s formatted text.
::first-letter
Styles the **first letter** of an element’s text.
::selection
Styles the portion of text the user has **selected/highlighted**.
::marker
Styles the **bullet or numbering** of a list item (<li>).
::placeholder
Styles the placeholder text in **form fields** (<input>, <textarea>).
::backdrop
Styles the **background** layer behind an element in full-screen mode (e.g., <dialog>).
::cue
Styles the **captions/subtitles** displayed in media elements (<video>).
::file-selector-button
Styles the button part of an <input type="file"> element.
::target-text
Styles the specific **text fragment** highlighted when navigating with a text fragment URL.
::part(name)
Targets named parts inside a **Shadow DOM** component (Web Components).
::slotted(selector)
Targets content inserted into a **Shadow DOM <slot>** element.
**::-webkit-autofill**
**(Vendor Prefix)** Targets input fields when they have been **auto-filled** by the browser.
**::-webkit-slider-thumb**
**(Vendor Prefix)** Styles the **handle (thumb)** of an <input type="range">.
**::-webkit-slider-runnable-track**
**(Vendor Prefix)** Styles the **track** of an <input type="range">.
**::-webkit-validation-next-paged-page**
**(Vendor Prefix)** Styles the native **error message balloon** for form validation.
**::-webkit-search-decoration**
**(Vendor Prefix)** Targets the **search icon/clear button** in <input type="search">.
**::next-paged-page**
**(Print Layout)** Targets the generated **empty boxes** for print and paged media layouts.
**::grammar-error**
**(Vendor Prefix)** Styles text marked by the browser as a **grammar error**.
Pseudo-element Use Cases:
1.::before & ::after - (Content Generation)
These are used with the `content` property to insert non-semantic decorative content.
<p class="text-ex">This is a long paragraph where only the very first line will be styled differently, regardless of how wide the browser window is. The styling property is restricted to only font-based styles, color, background, etc.</p>
Output:
This is a long paragraph where only the very first line will be styled differently, regardless of how wide the browser window is. The styling property is restricted to only font-based styles, color, background, etc.
3.::first-letter - (Text Formatting)
Used to create drop-cap effects on the first letter of a block-level element.
<p class="first-letter-ex">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Output:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
4.::selection - (User Interaction)
Styles the foreground (text color) and background of text selected by the user.
A crucial pseudo-element for modern form styling. It targets the input element when the browser has auto-filled its value (e.g., saved passwords/addresses).
CSS code:
/* Note: Requires vendor prefix and "!important" to override browser styles */
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #2b2b1a inset !important; /* Dark green background */
-webkit-text-fill-color: var(--valid-color) !important;
}
