コンテンツ

例

基本的な例

`::before` および `::after` 疑似要素の内容を設定するには、content-[<value>] 構文を before および after バリアントとともに使用します。

<p>Higher resolution means more than just a better-quality image. With a
Retina 6K display, <a class="text-blue-600 after:content-['_↗']" href="...">
Pro Display XDR</a> gives you nearly 40 percent more screen real estate than
a 5K display.</p>

属性値を参照する

`attr()` CSS 関数を使用して属性に格納された値を参照するには、content-[attr(<name>)] 構文を使用します。

<p before="Hello World" class="before:content-[attr(before)] ...">
  <!-- ... -->
</p>

スペースとアンダースコアの使用

空白は HTML でクラスの終わりを示すため、任意の値のスペースはアンダースコアに置き換えてください。

<p class="before:content-['Hello_World'] ..."></p>

実際のアンダースコアを含める必要がある場合は、バックスラッシュでエスケープできます。

<p class="before:content-['Hello\_World']"></p>

CSS 変数の使用

CSS 変数を使用して ::before および ::after 疑似要素のコンテンツを制御するには、content-(<custom-property>) 構文を使用します。

<p class="content-(--my-content)"></p>

これは content-[var(<custom-property>)] のショートハンドであり、var() 関数を自動的に追加します。

レスポンシブデザイン

プレフィックスa content ユーティリティ ユーティリティを適用するのは、md: のようなブレークポイントバリアントを付けてmedium 画面サイズ以上の場合のみにします。

<p class="before:content-['Mobile'] md:before:content-['Desktop'] ..."></p>

バリアントの使用方法の詳細については、バリアントのドキュメントを参照してください。