CSS 生成コンテンツ

CSS 生成コンテンツ (CSS generated content) モジュールは、 CSS により要素のコンテンツを置き換えたり、コンテンツを文書に追加したりする方法を定義します。

生成コンテンツは、コンテンツの置換に使用することができます。この場合、 DOM ノードのコンテンツは CSS に置き換えられます。 CSS 生成コンテンツを使用すると、言語固有の引用符の生成、カスタムリストアイテム番号や箇条書きの生成、選択した擬似要素に無名置換要素としてコンテンツを生成して視覚的にコンテンツを追加することもできます。

生成コンテンツの実際

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: "Only one ";
  font-size: min(6vh, 2rem);
  justify-content: center;
  display: flex;
  font-family: comic-sans, papyrus, sans-serif;
}

このサンプルの HTML は、空の内に 1 つの空の

があるだけです。雪だるまは、CSS 画像、CSS 背景と境界を使用して作成されています。ニンジンの鼻は、生成コンテンツを使用して追加されています。これは、 ::before 擬似要素に、幅の広いオレンジ色の左境界線が付いた空のボックスを追加したものです。テキストも生成コンテンツです。 ::after 擬似要素に content プロパティを適用して、"only one

" が生成されています。

上記の例で "Play" をクリックすると、 MDN Playground でコードを表示または編集できます。

（を参照）

ガイド

生成コンテンツの「手引」ガイド: content プロパティを使用して、文書にテキストや画像コンテンツを追加する方法を学びます。
生成コンテンツによる装飾的なボックスの作成: 視覚効果のための生成コンテンツのスタイル設定の例です。

仕様書

Specification
CSS Generated Content Module Level 3

CSS 生成コンテンツ

生成コンテンツの実際

リファレンス

プロパティ

関数

データ型

ガイド

関連概念

仕様書

関連情報