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.
Only a small subset of CSS properties can be used with the ::cue pseudo-element:
coloropacityvisibilitytext-decorationand its longhand properties:text-decoration-line,text-decoration-color, andtext-decoration-styletext-shadowbackgroundand its longhand properties:background-color,background-clip,background-image,background-origin,background-position,background-repeat,background-size,background-attachment, andbackground-blend-modeoutlineand its longhand properties:outline-color,outline-style,outline-widthfontand its longhand properties:font-kerning,font-style,font-variant,font-variant-numeric,font-variant-position,font-variant-east-asian,font-variant-caps,font-variant-alternates,font-variant-ligatures,font-synthesis,font-feature-settings,font-language-override,font-weight,font-size,font-size-adjust,font-stretch, andfont-familyline-heightwhite-spacetext-combine-uprightruby-position
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 shorthand properties apply to each cue individually, to avoid creating boxes and obscuring unexpectedly large areas of the media.
Syntax
How to read CSS syntax.::cue | ::cue( <selector> )
Example
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 | Draft | Initial definition |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
1. Firefox currently does not support a parameter on ::cue.