新着！ 私の44ページ電子書籍「CSSを44分で」が発売されました！ 😃

今すぐ入手 →

#content

:beforeと:after擬似要素のテキストコンテンツを定義します。

default content: normal;

コンテンツは要素に追加されません。

content: "Foo bar";

このHTML要素を考慮すると

<p class="element">
  Hello world
</p>

そして、このCSS

.element:before {
  content: "Foo bar";
}

テキストコンテンツは要素のコンテンツの前に追加されます。

最終的な結果がHTMLからのテキストとCSSからのテキストを組み合わせる方法に注意してください。

content: url(/images/jt.png);

url()関数を使用すると、画像を挿入できます。

content: attr(data-something);

このHTML要素を考慮すると

<p class="element" data-something="cssreference">
  Hello world
</p>

そして、このCSS

.element:before {
  content: attr(data-something);
}

要素はHTMLの属性からテキストコンテンツを取得します。