【Tailwind CSS】疑似要素 ::before(::after)を使ってみよう！
はじめに
この記事の概要
こんにちは、株式会社TOKOSのたくまです！
皆さんはCSSで疑似要素の::beforeと::afterを使用したことはありますか？
疑似要素とは、HTMLに追加をせずに指定した要素の特定の位置・部分にスタイルを付与できるものです。
疑似要素の中でも、先述した::beforeと::afterは有名だと思います。
通常の使用方法については、下記のサイトが分かりやすいかと思います。
CSSの疑似要素とは？beforeとafterの使い方まとめ
CSSの疑似要素「:before」と「:after」の超便利な使い方を総まとめしました。具体的な表現例や「使うことにどんなメリットがあるのか」なども紹介しています。
saruwakakun.comただ、Tailwind CSSで使用する際は通常のCSSと記述方法が異なります。
そこで、今回はTailwind CSSでの::beforeと::afterの使用方法を紹介します！
対象読者
- Tailwind CSSを勉強中の初学者の方
::before(::after)の使い方が分からない方
Tailwind CSSで::beforeと::afterを使ってみる
::beforeと::afterを使用して文字を表示する
早速、Tailwind CSSで::beforeと::afterを使ってみましょう！
最初は「こんにちは」というテキスト周りに「おはよう」と「こんばんは」のテキストを表示させてみようと思います。
記述方法は下記の通りになります。
<body>
<div
class="
w-96 h-48 bg-dark-blue-200 text-center
before:content-['おはよう'] before:text-sky-300 before:text-3xl
after:content-['こんばんは'] after:text-amber-300 after:text-3xl
"
>
<h1 class="text-white">こんにちは</h1>
</div>
</body>このように記述することで、Tailwind CSSで::beforeと::afterを適用させることができます。
実際の画面がこちらです。
検証ツール(Chromeのデベロッパーツール)で確認してみても、しっかりと適用されていることが分かります。
ポイントとして、::before(::after)を適用させたい要素には、before:text-3xlのように、before:(after:)とクラス名をくっつけて記述することです。
ちなみに、before:(after:)の前にhover:をくっつけることで、ホバーアクションさせることも可能です。
::beforeと::afterを使用して打消し線を表示する
次に、::beforeと::afterを使用して、二重の打消し線を表示させたいと思います！
Tailwind CSSにはもともとline-throughという打消し線のクラスが存在します。
line-throughに加えてdecoration-doubleやdecoration-red-600といったクラスを付与することで二重の打消し線を表示させることができます。
実際に表示させた例がこちらです。
たくま線と線の間が窮屈に感じる。。。
これでも打消し線として良いとは思うのですが、もう少し線と線の幅を拡大させたい場合などは::beforeと::afterを使用すると便利です!
::beforeと::afterを使用する場合は、先程のline-throughなどは使用しません。
<body>
<div
class="
w-fit text-4xl relative
before:absolute before:left-0 before:top-7 before:w-full before:h-[2px] before:bg-red-600
after:absolute after:left-0 after:top-4 after:w-full after:h-[2px] after:bg-red-600
"
>
<h1>こんにちは</h1>
</div>
</body>少し長くなりますが、記述するとこのようになります。
こちらはrelativeとabsoluteで線の位置を絶対指定することで、好みの位置に配置しています。
線の太さもheightで指定しています。
画面上で表示させた例がこちらです！
たくまさっきよりも打消し線っぽくなった！
このように::beforeと::afterを使用することで、自分好みにカスタマイズすることができます！
終わりに
今回はTailwind CSSでの::beforeと::afterの使用方法を紹介しました！
上記のような打消し線を表示させる際には、かなり使いやすいと思います。
難点としては、Tailwind CSSの性質上、凝ったものを作成すると記述が長くなってしまうことでしょうか。
その際は改行などを駆使して、コードを見やすくすると良いと思います。
アレンジの幅はまだまだ無限にあると思うので、ぜひ皆さんもお試しください！
この記事を書いた人
