ISSEN 
はじめに
この記事の概要
こんにちは、株式会社TOKOSのたくまです！
皆さんはCSSで疑似要素の::beforと::afterを使用したことはありますか？
疑似要素とは、HTMLに追記をせずに指定した要素の特定の位置・部分にスタイルを付与することができるものです。
疑似要素の中でも、先述した::beforと::afterは有名だと思います。
通常の使用方法については、下記のサイトが分かりやすいかと思います。
参考
CSSの疑似要素とは？beforeとafterの使い方まとめサルワカ
ただ、tailwindcssで使用する際は通常のCSSと記述方法が異なります。
そこで、今回はtailwindcssでの::beforと::after使用方法を紹介します！
対象読者
- tailwindcssを勉強中の初学者の方
- ::befor(::after)の使い方が分からない方
tailwindcssで::beforeと::afterを使ってみる
::beforeと::afterを使用して文字を表示する
早速、tailwindcssで::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>このように記述することで、tailwindcssで::beforと::afterを適用させることが出来ます。
実際の画面がコチラです。
検証ツール(Chromeのデベロッパーツール)で確認してみても、しっかりと適用されていることが分かります。
ポイントとして、::before(::after)を適用させたいclassには、before:text-3xlのように、before:(after:)とclass名をくっつけて記述することです。
ちなみに、before:(after:)の前にhover:をくっつけることで、ホバーアクションさせることも可能です。
::beforeと::afterを使用して打消し線を表示する
次に、::beforeと::afterを使用して、二重の打消し線を表示させたいと思います！
tailwindcssには元々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を使用することで、自分好みにカスタマイズすることが出来ます！
終わりに
今回はtailwindcssでの::beforと::afterの使用方法を紹介しました！
上記の打ち消し線などを表示させる際などには、かなり使いやすいと思います。
難点としては、tailwindcssの性質上、凝ったものを作成すると記述が長くなってしまうことでしょうか。
その際は改行などを駆使して、コードを見やすくすると良いと思います。
アレンジの幅はまだまだ無限にあると思うので、ぜひ皆さんもお試し下さい！
今回はtailwindcssについて紹介しましたが、css設計についてもっと詳しく知りたいという方は以下の書籍がおすすめです。
初学者の方が悩みがちなBEMなどについても分かりやすく解説してくれています。
