::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 compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
::cueChrome Full support 26Edge Full support 79Firefox Full support 55
Notes
Full support 55
Notes
Notes 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.
IE No support NoOpera Full support 15Safari Full support 6.1WebView Android Full support ≤37Chrome Android Full support 26Firefox Android Full support 55Opera Android Full support 14Safari iOS Full support 6.1Samsung Internet Android Full support 1.5
::cue(<selector>)Chrome Full support 26Edge Full support 79Firefox No support NoIE No support NoOpera Full support 15Safari Full support 6.1WebView Android Full support ≤37Chrome Android Full support 26Firefox Android No support NoOpera Android Full support 14Safari iOS Full support 6.1Samsung Internet Android Full support 1.5

Legend

Full support
Full support
No support
No support
See implementation notes.
See implementation notes.

See also