The ::cue pseudo-element is used to style WebVTT (Web Video Text Tracks) cues in media elements like <video> or <audio>. It allows you to customize the appearance of subtitles or captions rendered by the browser.

Key Points

1
::cue targets the text of a WebVTT track, such as subtitles or captions.
2
You can style properties like color, background, font-size, font-family, text-shadow, and line-height.
3
It applies only to text rendered from <track> elements associated with media.
4
Multiple ::cue selectors can be combined with conditions, e.g., ::cue(v[lang=en]) for language-specific styling.

Example: Styling Video Subtitles with ::cue

In this example, all subtitles from the WebVTT track are displayed with yellow text on a semi-transparent black background, with a slight text shadow for readability.

Best Practices

1
Use ::cue to improve subtitle readability and match your site's design.
2
Test styling across different browsers, as some may render cues slightly differently.
3
Avoid overly decorative styles that could make subtitles hard to read.
4
Combine with accessibility guidelines to ensure subtitles are legible for all users.

Difficulty: 6/10

Topics: CSS pseudo-elements, media player UI customization, shadow DOM styling

Scenario Questions

0-2 years experience

1
How would you style the subtitles in a <video> element to be white with a black outline using CSS?
2
What happens if you try to use ::cue on a <video> that has no <track> element defined?

2-5 years experience

1
Our video player’s captions suddenly stopped responding to ::cue styles after we upgraded the frontend framework — what could be breaking this, and how would you debug it?
2
We’re using WebVTT captions, but ::cue styles only work in Chrome — how would you investigate and fix cross-browser inconsistency?

5-8 years experience

1
How would you design a themable video player that supports dynamic caption styling via ::cue while maintaining performance on low-end devices?
2
You need to support both custom ::cue styles and user-selected accessibility presets — how do you avoid CSS specificity conflicts and ensure the user’s choice always overrides defaults?

8+ years experience

1
We’re migrating from a custom caption overlay system to native <track> + ::cue — what architectural tradeoffs do you consider around accessibility, performance, and legacy browser support?
2
How would you design a cross-team standard for media caption styling that ensures consistency across 20+ products while allowing product teams to customize appearance without breaking accessibility compliance?

Follow-up Questions

❓What happens if you apply a margin to ::cue and it doesn’t render?
❓How would you debug why captions aren’t styling even though the CSS rule looks correct?
❓Can ::cue style multiple text tracks at once, or do you need separate rules?