CSS Pseudo-element

CSS Pseudo-Elements: Styling Virtual Sub-Parts and Accents

A CSS pseudo-element uses a double colon (::) to style a specific part of an element—such as its first letter, input placeholder text, or selection highlight—or to inject decorative ::before and ::after boxes without cluttering your HTML markup.

Most Useful CSS Pseudo-Elements

• ::before and ::after: Create virtual child elements inside a container (requiring a content property, even content: "";) for decorative badges, dividers, or quote marks.
• ::placeholder: Styles hint text inside input and textarea elements.
• ::selection: Customizes the background and text color when a visitor highlights text with a mouse or keyboard.
• ::marker: Colors or customizes list bullets and numbers cleanly.
• ::first-line / ::first-letter: Styles drop caps or lead lines in editorial layouts.

.required-label::after {
    content: " *";
    color: #dc2626;
    font-weight: 700;
}

.accent-heading {
    position: relative;
    padding-left: 14px;
}

.accent-heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    background-color: #2563eb;
    border-radius: 2px;
}

::selection {
    background-color: #bfdbfe;
    color: #0f172a;
}

Accessibility Rules for ::before and ::after

Screen readers may ignore or unpredictably read text injected via CSS content: "...", and visitors cannot select or copy pseudo-element text. Keep meaningful labels, warnings, and real content in HTML, reserving ::before and ::after for purely visual decoration.

Common Mistakes to Avoid

• Forgetting content: ""; on ::before or ::after: Without a content declaration, the browser never generates the pseudo-element at all.
• Using ::before on void tags like img or input: Void elements have no inner children, so ::before and ::after do not render on img or most form input types.
• Mixing single colons : with double colons ::: Modern CSS uses :: for pseudo-elements (::before) and : for pseudo-classes (:hover).

Frequently Asked Questions

What is the difference between a pseudo-class and a pseudo-element?

A pseudo-class (:hover, :first-child) targets an existing element in a certain state, while a pseudo-element (::before, ::selection) styles a sub-part or creates a virtual box inside an element.

How do I prevent screen readers from reading decorative pseudo-element symbols?

Modern CSS supports alt text syntax like content: "★" / ""; (empty string after the slash tells screen readers to skip the symbol).