CSS 中的伪元素 ::cue 用于设置具有视频文本轨道的媒体中的字幕和 （WebVTT） 提示的样式。
- 在媒体的整个 cue 集上，将应用这些属性。
- 只有 background 及其普通属性单独应用于每个 cue。
以下 CSS 属性只能由任何选择器上的 ::cue 伪元素使用：
- 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
语法
selector::cue|::cue(<selector>) {
/* ... */
}
CSS ::cue 示例
下面是一个显示 ::cue 伪元素用法的示例：
<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>
