::cue CSS Pseudo Element

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The ::cue pseudo-element in CSS is used to style and customize the cue (usually an icon or text) that appears in certain HTML elements when they are used for media playback, such as <audio> and <video> elements. The cue typically indicates subtitles, captions, or other textual content associated with the media.

Developers can apply styles to the ::cue pseudo-element to control its appearance, including properties like color, font-size, font-weight, and more. This allows for customization of the appearance of subtitles, captions, or other cues in a media player, making them visually consistent with the overall design of a web page or application.

Here's a simple example of how you might use the ::cue pseudo-element to style the cues in a media element:

::cue {

  color: white;

  background-color: black;

  font-size: 18px;

  font-weight: bold;

}

In this example, cues would be displayed with white text on a black background, using a larger font size and bold text. Please note that the availability and support for styling cues may vary among different web browsers and media players.

Syntax

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

Example

HTML

No example, click CSS to view code.

CSS

::cue {

  color: #fff;

  background-color: rgba(0, 0, 0, 0.6);

}

Result

Editor

Notes

In CSS3, pseudo-elements were denoted by two colons to make the syntax different from pseudo-classes. In CSS2, they are indicated by a single colon. Browsers generally understand both syntaxes.