Tailwind CSS 練習問題 60：CSSの疑似要素とcontentプロパティ
Tailwind CSSにおいて、要素の前に `::before` 疑似要素を用いて『New!』という文字列を追加したい場合、正しい記述はどれか。
- `before:content-['New!']` と記述する
- `before:text-New!` と記述する
- `pseudo-before-['New!']` と記述する
- `content-before-New!` と記述する
- `before-string:['New!']` と記述する
正解と解説を見る
正解：`before:content-['New!']` と記述する
`::before` 疑似要素で文字列を追加するには、`before:content-['New!']` と記述するのが正解です。
【正解の理由】
Tailwind CSSでは、疑似要素のバリアント（`before:`や`after:`）と、任意の値（アービトラリバリュー）を直接指定する角括弧の記法を組み合わせることで、CSSの`content: "New!";`に相当するスタイルを直接HTML上に記述できます。
【不正解の理由】
• 「`before:text-New!` と記述する」は誤り。`text-`は文字色やサイズのプレフィックスであり、内容の追加はできません。
• 「`pseudo-before-['New!']` と記述する」は誤り。疑似要素を指定するための正しいプレフィックスは`before:`です。
• 「`content-before-New!` と記述する」は誤り。バリアントの指定位置や任意の値の記法が間違っています。
• 「`before-string:['New!']` と記述する」は誤り。存在しないバリアントおよびプロパティ名です。