::details-content

Exemple interactif

details[open]::details-content {
  color: dodgerblue;
  padding: 0.5em;
  border: thin solid grey;
}

<details open>
  <summary>Exemple de résumé</summary>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  <p>
    Architecto cupiditate ea optio modi quas sequi, esse libero asperiores
    debitis eveniet commodi hic ad.
  </p>
</details>

Syntaxe

selector::details-content {
  /* ... */
}

Exemples

Exemple simple

Dans cet exemple, le pseudo-élément ::details-content est utilisé pour définir une background-color sur le contenu de l'élément <details>.

HTML

<details>
  <summary>Cliquez ici</summary>
  <p>Voici un contenu</p>
</details>

CSS

details::details-content {
  background-color: #a29bfe;
}

Résultat

Exemple de transition

Dans cet exemple, le pseudo-élément ::details-content est utilisé pour définir une transition sur le contenu de l'élément <details> afin qu'il s'affiche en douceur lorsqu'il est développé, et disparaisse à nouveau lorsqu'il est réduit. Pour ce faire, deux transitions distinctes sont spécifiées à l'intérieur de la propriété abrégée transition :

• La propriété opacity reçoit une transition de base de 600ms pour créer l'effet de fondu en entrée/sortie.
• La propriété content-visibility (qui est basculée entre hidden et visible lorsque le contenu <details> est développé/réduit) reçoit également une transition de base de 600ms, mais avec la valeur transition-behavior allow-discrete spécifiée. Cela permet au navigateur de démarrer une transition sur content-visibility, dont le comportement d'animation est discret. L'effet est que le contenu est visible pendant toute la durée de la transition, permettant aux autres transitions d'être vues. Si cette transition n'était pas incluse, le contenu disparaîtrait immédiatement lorsque le contenu <details> serait réduit — vous ne verriez pas le fondu en douceur.

HTML

<details>
  <summary>Cliquez ici</summary>
  <p>Voici un contenu</p>
</details>

CSS

details::details-content {
  opacity: 0;
  transition:
    opacity 600ms,
    content-visibility 600ms allow-discrete;
}

details[open]::details-content {
  opacity: 1;
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• <details>
• <summary>