0Pricing
CSS Academy · Lesson

::placeholder ::selection and ::marker

Style input placeholders, text selections, and list marker bullets with pseudo-elements.

::placeholder ::selection and ::marker is a free CSS Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

::placeholder

::placeholder styles the placeholder text inside form input and textarea elements. Only a subset of CSS properties are supported.

input::placeholder {
  color: #aaa;
  font-style: italic;
  font-size: 0.9rem;
}

Supported ::placeholder Properties

Not all CSS properties work on ::placeholder. Supported properties include: color, font-size, font-weight, font-style, letter-spacing, opacity, and a few others. Layout properties are not supported.

Placeholder Accessibility

Placeholder text disappears when users type and should NOT be used as a substitute for <label> elements. Always provide visible labels for form fields. Placeholder contrast must also meet WCAG 4.5:1 ratio.

::selection

::selection styles text that the user has highlighted with the cursor. It creates branded selection colors.

::selection {
  background: royalblue;
  color: white;
}

p::selection {
  background: #ffd700;
  color: #111;
}

::selection Supported Properties

Only a handful of properties work with ::selection: color, background-color, text-shadow, and text-decoration. Others are ignored.

::marker

::marker styles the list item marker — the bullet or number in <ul> and <ol> lists.

li::marker {
  color: royalblue;
  font-weight: bold;
  font-size: 1.2em;
}

ol li::marker {
  content: counter(list-item) ". ";
  color: #666;
}

::marker Supported Properties

Supported ::marker properties include: color, content, font-size, font-family, font-weight, font-style, and unicode-bidi.

Custom List Markers with ::marker

Use emoji or special characters as list markers:

li::marker {
  content: "✦ ";
  color: goldenrod;
}

li.warning::marker {
  content: "⚠ ";
}

::first-line

::first-line styles the first rendered line of a block element — the actual line as rendered, not the first line break in HTML. Useful for drop-cap-like lead paragraph styling.

p::first-line {
  font-weight: bold;
  font-variant: small-caps;
}

::first-letter

::first-letter targets the first letter of the first formatted line. Classic use: drop caps in magazine-style typography.

p:first-of-type::first-letter {
  font-size: 3rem;
  font-weight: bold;
  float: left;
  line-height: 1;
  margin: 0 4px 0 0;
}

::cue for Subtitle Styling

::cue styles VTT subtitles in HTML <video> elements — a specialized but important pseudo-element for accessible media.

::cue {
  color: white;
  background: rgba(0,0,0,0.75);
  font-size: 1.1rem;
}

Quick Check

Which pseudo-element allows styling the bullet or number of a list item?

Recap

::placeholder styles input placeholder text. ::selection styles highlighted text. ::marker styles list bullets and numbers. ::first-letter and ::first-line enable typographic fine-tuning. All support only a limited subset of CSS properties.

Frequently asked questions

Is the “::placeholder ::selection and ::marker” lesson free?

Yes — the full text of “::placeholder ::selection and ::marker” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “::placeholder ::selection and ::marker”?

Style input placeholders, text selections, and list marker bullets with pseudo-elements. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “::placeholder ::selection and ::marker” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. ::before and ::after Content
  2. ::placeholder ::selection and ::marker
  3. CSS Counters with ::before
  4. Decorative Patterns with Pseudo-elements
← Back to CSS Academy