疑似要素 ::before を“ちゃんと味方にする”
::before は、「本物の要素の前に、もう1つ“見た目だけの要素”を生やす」ための仕組みです。
HTML を増やさずに、アイコン・線・ラベル・装飾などを足せるので、デザインの自由度が一気に上がります。
まずは CSS の基本から押さえて、そのあと Tailwind でどう書くかを見ていきましょう。
::before の基本ルール
一番大事な前提「content が必須」
::before を使うときに、初心者が一番つまずくポイントがここです。
.title::before {
content: "";
}
この content を書かないと、::before はそもそも「存在しないもの」として扱われます。
つまり、どれだけ width や background を書いても、content がなければ何も表示されません。
空文字でもいいので、必ず content: ""; を書く。
ここだけは「おまじない」ではなく、絶対に必要なルールとして覚えてください。
見出しの左にラインを付ける例（CSS）
CSS での書き方
.section-title {
position: relative;
padding-left: 16px;
font-weight: bold;
font-size: 20px;
}
.section-title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 6px;
height: 60%;
transform: translateY(-50%);
background: #3182ce;
border-radius: 9999px;
}
HTML
<h2 class="section-title">お知らせ</h2>
::before が「縦線の役割」をしてくれていて、
HTML は <h2> だけのまま、装飾だけを CSS 側で足しています。
ここでのポイントは、position: relative を親に付けて、::before を position: absolute でその中に固定していることです。
「親を基準にして、疑似要素を好きな位置に置く」というパターンは、実務でも頻出です。
同じデザインを Tailwind で書く
Tailwind は疑似要素を直接サポートしていないので、
「任意バリアント（before:）」と「content-[”]」を組み合わせて書きます。
Tailwind での書き方
<h2
class="relative pl-4 font-bold text-xl
before:content-[''] before:absolute before:left-0 before:top-1/2
before:w-1 before:h-3/5 before:-translate-y-1/2
before:bg-blue-600 before:rounded-full"
>
お知らせ
</h2>
ポイントは次の2つです。
1つ目は before:content-[''] を必ず書くこと。
CSS の content: "" と同じで、これがないと ::before 自体が出てきません。
2つ目は、before: プレフィックスで、position や background などを全部「before 用」に指定していること。
Tailwind では「before 用のユーティリティ」を積み重ねていくイメージになります。
テキストの前にアイコンを付ける例
CSS 版（絵文字アイコン）
.link-with-icon {
position: relative;
padding-left: 20px;
color: #3182ce;
text-decoration: none;
}
.link-with-icon::before {
content: "🔗";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
HTML
<a href="#" class="link-with-icon">外部リンク</a>
content に文字を入れると、テキストや絵文字を前に表示できます。
「ラベル」「タグ」「アイコン」など、ちょっとした装飾にとても便利です。
Tailwind 版（絵文字アイコン）
Tailwind では content-['🔗'] のように書きます。
<a
href="#"
class="relative pl-5 text-blue-600 no-underline
before:content-['🔗'] before:absolute before:left-0 before:top-1/2
before:-translate-y-1/2"
>
外部リンク
</a>
ここでも、before:content-['🔗'] がないと何も表示されません。
Tailwind で疑似要素を使うときは「content をどう書くか」が一番のポイントになります。
バッジやラベルを付ける例
CSS 版：カードの右上に「NEW」バッジ
.card {
position: relative;
padding: 20px;
background: #fff;
border-radius: 10px;
}
.card::before {
content: "NEW";
position: absolute;
top: 8px;
right: 8px;
padding: 2px 8px;
font-size: 10px;
color: white;
background: #e53e3e;
border-radius: 9999px;
}
HTML
<div class="card">
新着記事のタイトル
</div>
HTML を一切増やさずに「NEW バッジ」を足せています。
こういう「ちょっとした UI の飾り」は、::before の得意分野です。
Tailwind 版：NEW バッジ
<div
class="relative p-5 bg-white rounded-xl
before:content-['NEW'] before:absolute before:top-2 before:right-2
before:px-2 before:py-0.5 before:text-[10px]
before:text-white before:bg-red-600 before:rounded-full"
>
新着記事のタイトル
</div>
Tailwind では、before: を使ってバッジの見た目をすべて指定します。
少しクラスは長くなりますが、CSS ファイルを増やさずに完結できるのがメリットです。
::before を使うときの重要ポイント（深掘り）
content は「必須」かつ「設計の肝」
::before は、content がないと存在しません。
これは単なる仕様ではなく、「何を表示する疑似要素なのか」を決める、とても重要な部分です。
空の装飾なら content: ""
文字やアイコンなら content: "NEW" や content: "★"
Tailwind なら before:content-[''] や before:content-['NEW'] のように書きます。
ここを意識して設計すると、「ただのおまけ」ではなく、
UI の一部として意味のある疑似要素を作れるようになります。
position とセットで考える
::before を「線」「バッジ」「アイコン」として使うときは、
ほぼ必ず position: absolute とセットになります。
親に position: relative
疑似要素に position: absolute
この組み合わせを覚えておくと、
「親の中の好きな場所に、好きな装飾を生やす」ことが自由にできるようになります。
Tailwind では relative と before:absolute をセットで使うイメージです。
HTML を汚さずに“装飾だけ”を足せるのが最大の魅力
::before の本質はここです。
見出しの線
カードのバッジ
リンクのアイコン
背景の飾り
こういった「意味はないけど、見た目として欲しいもの」を、
HTML に余計なタグを増やさずに実現できる。
これは、きれいなマークアップと、リッチなデザインを両立するための強力な武器です。
まとめ
::before は、慣れると本当に楽しい疑似要素です。
CSS では
content を必ず書く
position と組み合わせて「どこに置くか」を決める
装飾専用の小さな要素として使う
Tailwind では
before:content-[”] を忘れない
before:〜 のユーティリティを積み上げていく
relative とセットで考える
