::cue CSS Pseudo Element
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
No example, click CSS to view code.
::cue {
color: #fff;
background-color: rgba(0, 0, 0, 0.6);
}
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.
Browser Support
The following table will show you the current browser support for the CSS ::cue
pseudo element.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
79 | 26 | 55 | 15 | 7 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
26 | 55 | 14 | 7 | 1.5 | 4.4 |
Last updated by CSSPortal on: 1st October 2023