Codectionary / Developer documentation / CSS

Pseudo-elements

Pseudo-elements let you style a specific part of an element rather than the whole thing, or insert generated content without adding extra HTML. ::before and ::after insert content before/after an element's actual content. ::first-line and ::first-letter target specific text portions. ::placeholder styles input placeholder text, and ::selection styles user-highlighted text.

Syntax

element::before { content: ""; }

Examples

::before and ::after

Inserting decorative content without extra markup - always requires the content property.

/* Demo setup: sizing, structure or neutral surfaces. */
input{display:block;padding:.5rem;margin-block:.5rem}

.required-label::after {
  content: " *";
  color: red;
}

.quote::before {
  content: "\201C"; /* opening curly quote character */
  font-size: 2em;
}
  1. The required-label gets a decorative marker from ::after.
  2. The quotation gets an opening quote from ::before.
  3. The input still uses required in HTML; generated decoration alone does not make it required.
HTML used by this example
<label class="required-label" for="title">Lesson title</label><input id="title" required><blockquote class="quote">Small experiments make unfamiliar code easier to understand.</blockquote>

::first-letter and ::first-line

Styling just the beginning of a text block, like a drop cap.

/* Demo setup: sizing, structure or neutral surfaces. */
.article{max-width:30rem}

.article p::first-letter {
  font-size: 3em;
  float: left;
  line-height: 0.8;
  margin-right: 4px;
}
  1. The paragraph is long enough to wrap into several lines.
  2. The first-letter rule decorates its initial letter without changing the text.
  3. Resize the preview to see how the first formatted line can change.
HTML used by this example
<article class="article"><p>Learning a language starts with one small working program. Learning a language starts with one small working program. Learning a language starts with one small working program. Learning a language starts with one small working program. Learning a language starts with one small working program. Learning a language starts with one small working program. Learning a language starts with one small working program. </p></article>

::placeholder and ::selection

Styling input placeholder text and user text selection highlighting.

/* Demo setup: sizing, structure or neutral surfaces. */
input{display:block;padding:.6rem;margin-block:.5rem}

input::placeholder {
  color: #9ca3af;
  font-style: italic;
}

::selection {
  background: #fef08a;
  color: #000;
}
  1. The input has actual placeholder text to style.
  2. The paragraph provides text that can be selected.
  3. A placeholder is a hint, not a replacement for the persistent label.
HTML used by this example
<label for="message">Message</label><input id="message" placeholder="Write a short note"><p>Select this sentence to see the selection highlight.</p>

Parameters and values

  • ::before / ::after (pseudo-element): Inserts generated content, requires the content property
  • ::first-line / ::first-letter (pseudo-element): Targets the first line or letter of text
  • ::placeholder (pseudo-element): Styles an input's placeholder text
  • ::selection (pseudo-element): Styles user-highlighted text

Best practices

  • Always include a content property (even an empty string) on ::before/::after - without it, the pseudo-element does not render at all
  • Use ::before/::after for purely decorative content, not essential information - it is not reliably accessible to all assistive technology
  • Use double colons (::) for true pseudo-elements per the modern spec, though single colon (:before) still works for legacy compatibility
  • Use ::selection sparingly and ensure sufficient contrast - it affects how your content looks when users highlight text to copy it

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading