::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 {
  color: yellow;
  font-weight: bold;
}

試してみましょう

このプロパティは、あたかも 1 つの部品であるかのように、一連のキュー全体に適用されます。 background とその個別指定だけは例外で、各キューに個別に適用されます。これは、ボックスが生成されて予期せずメディアの大きな領域を占めることを避けるためです。

構文

Error: could not find syntax for this item

利用可能なプロパティ

セレクターにこの要素を含むルールでは、以下の CSS プロパティしか使用することができません。

例

WebVTT のキューを黒地に白にする

次の 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

関連情報