Contenu généré CSS

Le module de contenu généré CSS définit comment le contenu d'un élément peut être remplacé et comment du contenu peut être ajouté à un document avec CSS.

Le contenu généré peut être utilisé pour le remplacement de contenu, auquel cas le contenu d'un nœud DOM est remplacé par une <image> CSS. Le contenu généré CSS permet également de générer des guillemets spécifiques à la langue, de créer des numéros et des puces personnalisés pour les éléments de liste, et d'ajouter visuellement du contenu en générant du contenu sur certains pseudo-éléments en tant qu'éléments remplacés anonymes.

Le contenu généré en action

<div></div>

body,
div {
  background-repeat: no-repeat;
}
body {
  background-image: linear-gradient(#3a67ab, #e8f6ff 100%);
}
div {
  position: relative;
  width: 400px;
  height: 400px;
  background-image:
    linear-gradient(
      115deg,
      transparent 48%,
      brown,
      #996600,
      brown,
      transparent 52%
    ),
    linear-gradient(
      60deg,
      transparent 48%,
      brown,
      #996600,
      brown,
      transparent 52%
    ),
    radial-gradient(
      circle 10px at 50% 50%,
      #333333 30%,
      #999999 50%,
      transparent 50%
    ),
    radial-gradient(
      circle 10px at 50% 50%,
      #333333 30%,
      #999999 50%,
      transparent 50%
    ),
    radial-gradient(circle at 50% 50%, white 30%, #eeeeee 50%, transparent 50%),
    radial-gradient(circle at 50% 50%, white 30%, #eeeeee 50%, transparent 50%),
    radial-gradient(circle at 50% 50%, white 30%, #eeeeee 50%, transparent 50%);
  background-size:
    100px 100px,
    100px 100px,
    15px 15px,
    15px 15px,
    200px 200px,
    300px 300px,
    400px 400px;
  background-position:
    95% 120px,
    5% 120px,
    46% 80px,
    54% 80px,
    50% 0,
    50% 90px,
    50% 220px;
}
div::after {
  content: "";
  border: transparent solid 4px;
  border-left: orange 30px solid;
  height: 1px;
  width: 1px;
  position: absolute;
  left: 50%;
  top: 100px;
}

div::before {
  content: "Uniquement un seul <div>";
  font-size: min(6vh, 2rem);
  justify-content: center;
  display: flex;
  font-family: "Comic Sans", "Papyrus", sans-serif;
}

Le HTML pour cet exemple est un seul <div> vide à l'intérieur d'un <body> par ailleurs vide. Le bonhomme de neige a été créé avec des images CSS et des arrière-plans et bordures CSS. Le nez en carotte a été ajouté en utilisant du contenu généré : une boîte vide avec une large bordure gauche orange ajoutée au pseudo-élément ::before. Le texte est également du contenu généré : « Uniquement un seul <div> » a été généré avec la propriété content appliquée au pseudo-élément ::after.

Cliquez sur « Exécuter » dans l'exemple ci-dessus pour voir ou modifier le code dans le MDN Playground.

<content-list>
<content-replacement> (voir <image>)
<image>
<counter>
<quote>
<target>

Guides

« Comment faire » pour le contenu généré: Apprendre à ajouter du contenu textuel ou des images à un document en utilisant la propriété content.
Créer des boîtes fantaisie avec du contenu généré: Exemple de style de contenu généré pour des effets visuels.