W3cubDocs

/CSS

::cue

The ::cue CSS pseudo-element matches WebVTT cues within a selected element. This can be used to style captions and other cues in media with VTT tracks.

::cue {
  color: yellow;
  font-weight: bold;
}

The properties are applied to the entire set of cues as if they were a single unit. The only exception is that background and its longhand properties apply to each cue individually, to avoid creating boxes and obscuring unexpectedly large areas of the media.

Syntax

::cue | ::cue( <selector> )

Permitted properties

Rules whose selectors include this element may only use the following CSS properties:

Examples

Styling WebVTT cues as white-on-black

The following CSS sets the cue style so that the text is white and the background is a translucent black box.

::cue {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
}

Specifications

Specification Status Comment
WebVTT: The Web Video Text Tracks Format
The definition of '::cue' in that specification.
Candidate Recommendation Initial definition.

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
::cue 26 79 55
55
From Firefox 69, only allowed properties apply to the ::cue pseudo-element with no argument. See Permitted properties for a list of the allowed properties.
No 15 6.1
::cue(<selector>) 26 79 No No 15 6.1
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
::cue ≤37 26 55 14 6.1 1.5
::cue(<selector>) ≤37 26 No 14 6.1 1.5

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/::cue