::cue CSS Pseudo Element


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.


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


No example, click CSS to view code.
::cue {
color: #fff;
background-color: rgba(0, 0, 0, 0.6);


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.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 1st October 2023