What is the difference between :: and : in pseudo-elements?

The double-colon syntax (::before) distinguishes pseudo-elements from pseudo-classes, which use a single colon. For the four original pseudo-elements (::before, ::after, ::first-line, ::first-letter) the single-colon legacy form is still accepted for backwards compatibility.

Why is my ::before not showing?

::before and ::after only render if you set the content property — even an empty string like content: "" works. They also cannot be applied to replaced elements such as img or input, which have no content box for generated children.

Can you have more than one pseudo-element in a selector?

Traditionally a selector could end in only one pseudo-element. Newer specs allow chaining certain highlight pseudo-elements, but in practice you place each pseudo-element on its own selector and only ::before / ::after generate insertable content boxes.

How do ::slotted() and ::part() relate to shadow DOM?

::slotted() lets a shadow tree style elements that the light DOM assigns into its slots, while ::part() lets the outer page style elements a component exposes via the part attribute. Both are the sanctioned styling bridges across the shadow boundary.

What are the view-transition pseudo-elements?

When you run a View Transition, the browser builds a tree of pseudo-elements (::view-transition, ::view-transition-group(), ::view-transition-old() and ::view-transition-new()) holding snapshots of the old and new states. You target them to customize the cross-fade or slide animation.

What is the CSS Pseudo-Elements Reference?

A searchable reference for CSS pseudo-elements including ::before, ::after, ::marker, ::placeholder, ::slotted() and view-transition pseudo-elements, with what each targets, whether it generates content and browser support. It runs free in your browser on Gera Tools, with nothing uploaded.

CSS Pseudo-Elements Reference

Name: CSS Pseudo-Elements Reference
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Get one useful tool a week

Like this tool? Enter your email and we'll send you one genuinely useful Gera tool a week — plus a link to come back to this one. No spam, one-click unsubscribe any time.

This is a searchable reference for CSS pseudo-elements — the double-colon selectors that target a sub-part of an element or insert generated content. It spans the classic four (::before, ::after, ::first-line, ::first-letter), interface pseudo-elements like ::marker, ::selection and ::placeholder, shadow-DOM bridges, and the newer view-transition pseudo-element tree.

How it works

A pseudo-element is written with two colons followed by a keyword. Conceptually it lets you style something that is not a real element in your markup: the first letter of a paragraph, the bullet of a list item, the placeholder text in an input, or a fresh box of generated content. The generates column distinguishes the two kinds. ::before and ::after are generative — they create new boxes that only appear when you set the content property (use content: "" for purely decorative boxes). The rest are not generative — they hook into an existing sub-part such as ::first-line, ::marker or ::placeholder and only a restricted set of properties applies to each.

Pseudo-element directory

Pseudo-element	Generates	What it targets	Notes
`::before`	Yes	Content inserted before element’s content	Requires `content`; not on replaced elements
`::after`	Yes	Content inserted after element’s content	Requires `content`; not on replaced elements
`::first-line`	No	First formatted line of a block	Limited property subset only
`::first-letter`	No	First letter (or punctuation) of a block	Useful for drop caps
`::marker`	No	List item bullet or number	Accepts `color`, `font`, `content` only
`::selection`	No	Currently selected text	Accepts `color`, `background-color`
`::placeholder`	No	Placeholder text in form inputs	Style with care for contrast
`::backdrop`	No	Background behind modal/fullscreen	Used with `dialog[open]` and Fullscreen API
`::slotted()`	No	Slotted light-DOM children in shadow DOM	Shadow-internal only
`::part()`	No	Shadow-DOM elements with `part` attribute	Page-external styling hook
`::view-transition`	No	View transition snapshot tree root	Customize cross-fade/slide transitions

Practical examples

Drop cap using ::first-letter:

p:first-of-type::first-letter {
  font-size: 3.5em;
  line-height: 0.8;
  float: left;
  margin: 0.05em 0.1em 0 0;
  font-weight: bold;
}

Custom counter badge using ::before:

.badge::before {
  content: counter(step);
  counter-increment: step;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: currentColor;
  color: white;
  font-size: 0.75em;
  margin-right: 0.5em;
}

Styled list markers:

li::marker {
  content: "→ ";
  color: #3b82f6;
}

Placeholder contrast fix:

input::placeholder {
  color: #6b7280; /* meets 4.5:1 on white */
  font-style: italic;
}

Tips and notes

Generative pseudo-elements cannot be placed on replaced elements like img, br, input or iframe, because those have no content box to host children. ::first-letter honours leading punctuation and is the standard way to build a drop cap. ::marker only accepts a handful of properties (color, font, content) — set list-style-type or its content to change the bullet. For shadow DOM, ::slotted() styles from inside the component while ::part() styles from outside, giving deliberate, contract-based theming hooks.

Everything runs in your browser; nothing you search is uploaded.