---
title: '::cue'
slug: 'Web/CSS/::cue'
tags:
  - CSS
  - Pseudo-element
  - Reference
  - WebVTT
translation_of: 'Web/CSS/::cue'
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary">Le pseudo-élément CSS <strong><code>::cue</code></strong> permet de cibler les indications textuelles <a href="/fr/docs/Web/API/WebVTT_API">WebVTT</a> d'un élément. Ce pseudo-élément peut être utilisé afin de mettre en forme <a href="/fr/docs/Web/API/WebVTT_API#Styling_WebTT_cues">les légendes et autres indications textuelles</a> pour les médias avec des pistes VTT.</span></p>

<pre class="brush: css no-line-numbers">::cue {
  color: yellow;
  font-weight: bold;
}</pre>

<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>

<p>Seul un sous-ensemble des propriétés CSS peut être utilisé avec le pseudo-élément <code>::cue</code> :</p>

<ul>
 <li>{{CSSxRef("background")}} et les propriétés détaillées associées</li>
 <li>{{CSSxRef("color")}}</li>
 <li>{{CSSxRef("font")}} et les propriétés détaillées associées</li>
 <li>{{CSSxRef("line-height")}}</li>
 <li>{{CSSxRef("opacity")}}</li>
 <li>{{CSSxRef("outline")}} et les propriétés détaillées associées</li>
 <li>{{CSSxRef("ruby-position")}}</li>
 <li>{{CSSxRef("text-combine-upright")}}</li>
 <li>{{CSSxRef("text-decoration")}} et les propriétés détaillées associées</li>
 <li>{{CSSxRef("text-shadow")}}</li>
 <li>{{CSSxRef("visibility")}}</li>
 <li>{{CSSxRef("white-space")}}</li>
</ul>

<p>Les propriétés sont appliquées à l'ensembles des indications (comme si celles-ci formaient un seul ensemble). Seule <code>background</code> (ou les propriétés raccourcies associées) s'appliquent à chaque indication séparément (afin d'éviter de créer des boîtes qui masqueraient de grandes zones sur le média).</p>

<h2 id="Syntaxe">Syntaxe</h2>

{{csssyntax}}

<h2 id="Exemples">Exemples</h2>

<p>La règle CSS suivante permet d'avoir les indications textuelles dans un texte blanc et sur un arrière-plan qui est une boîte noire transparent.</p>

<pre class="brush: css">::cue {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
}</pre>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th>Spécification</th>
   <th>État</th>
   <th>Commentaires</th>
  </tr>
  <tr>
   <td>{{SpecName("WebVTT", "#the-cue-pseudo-element", "::cue")}}</td>
   <td>{{Spec2("WebVTT")}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{Compat("css.selectors.cue")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="/fr/docs/Web/API/WebVTT_API">Web Video Tracks Format (WebVTT)</a></li>
</ul>