::cue (:cue)

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

::cue CSS 伪元素匹配所选元素中的WebVTT提示。这可以用于在 VTT 轨道的媒体中使用字幕和其他线索。

只有 CSS 一小部分属性可以与 ::cue 伪元素一起使用:

属性应用于整个提示集,就像它们是单个单元一样。唯一的例外是背景及其简写属性可以单独应用于每个提示,以避免创建框并遮盖意外大面积的媒体。

语法

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

示例

以下 CSS 设置提示样式,使文本为白色,背景为半透明黑盒。

css
::cue {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
}

规范

Specification
WebVTT: The Web Video Text Tracks Format
# the-cue-pseudo-element

浏览器兼容性

BCD tables only load in the browser

参考