CSS - Pseudo-element - ::cue

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>
Advertisements