CSS - Pseudo-element - ::cue

Quiz

The ::cue pseudo-element in CSS is used to style the captions and (WebVTT) cues in media with video text tracks.

On the entire set of cues of the media, the properties are applied.
Only background and its longhand properties apply to each cue individually.

Following CSS properties may only be used by the ::cue pseudo-element on any selector:

background
background-attachment
background-color
background-clip
background-image
background-origin
background-position
background-repeat
background-size
color
font
font-family
font-size
font-stretch
font-style
font-variant
font-weight
line-height
opacity
outline
outline-color
outline-style
outline-width
ruby-position
text-combine-upright
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-decoration-thickness
text-shadow
visibility
white-space

Syntax

selector::cue | ::cue(<selector>) {
   /* ... */
}

CSS ::cue Example

Here is an example showing usage of ::cue pseudo-element:

<html>
<head>
<style>
    video {
        width: 800px;
    }

    video::cue {
        font-size: 1rem;
        color: peachpuff;
    }
</style>
</head>
<body>
    <video controls src="foo.mp4">
        <track default kind="captions" srclang="en" src="cue-sample.vtt" />
    </video>    
</body>
</html>

Print Page