疑似要素 content を“正しく・自在に使いこなす”ための実践ガイド
content は、疑似要素 ::before と ::after を使うときに欠かせないプロパティです。
初心者がここを理解すると、HTML を増やさずに アイコン・ラベル・線・装飾 を自在に追加できるようになります。
CSS と Tailwind CSS の両方で、実務レベルの使い方をかみ砕いて解説します。
content の基本ルールを理解する
content は「疑似要素を出現させるスイッチ」
.title::before {
content: "";
}
content を書かないと、::before や ::after は 存在しません。
どれだけ width や background を指定しても、何も表示されない理由はここにあります。
空文字でもいいので、必ず content を書く。
これは疑似要素の最重要ルールです。
content でできること
空の装飾を作る（線・丸・背景など）
.box::after {
content: "";
display: block;
width: 40px;
height: 2px;
background: #3182ce;
}
テキストを追加する（ラベル・バッジ）
.item::after {
content: "NEW";
color: white;
background: #e53e3e;
padding: 2px 6px;
border-radius: 9999px;
}
絵文字や記号を追加する（アイコン）
.link::before {
content: "→";
}
属性値を表示する（高度なテクニック）
.tooltip::after {
content: attr(data-label);
}
HTML
<div class="tooltip" data-label="説明文">カーソルを合わせてください</div>
Tailwind CSS での content の書き方
Tailwind では content をユーティリティとして直接書けないため、
任意値構文（arbitrary values） を使います。
空文字を入れる
<div class="relative after:content-[''] after:absolute after:w-10 after:h-[2px] after:bg-blue-600">
タイトル
</div>
テキストを入れる
<p class="relative after:content-['NEW'] after:ml-2 after:text-red-600">
新着情報
</p>
絵文字を入れる
<a class="relative after:content-['→'] after:ml-1 text-blue-600">
詳しく見る
</a>
Tailwind で疑似要素を使うときはbefore: または after: をすべてのプロパティにつける必要があります。
content を使った実践パターン
見出しの前に縦線を付ける
CSS版
.section-title {
position: relative;
padding-left: 16px;
}
.section-title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 4px;
height: 60%;
background: #3182ce;
transform: translateY(-50%);
}
Tailwind版
<h2
class="relative pl-4
before:content-[''] before:absolute before:left-0 before:top-1/2
before:w-1 before:h-3/5 before:bg-blue-600 before:-translate-y-1/2"
>
お知らせ
</h2>
テキストの後ろに矢印アイコンを付ける
CSS版
.link::after {
content: "→";
margin-left: 6px;
}
Tailwind版
<a class="after:content-['→'] after:ml-1 text-blue-600">
詳しく見る
</a>
NEW バッジを付ける
CSS版
.news-title {
position: relative;
padding-right: 40px;
}
.news-title::after {
content: "NEW";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
background: #e53e3e;
color: white;
font-size: 10px;
padding: 2px 6px;
border-radius: 9999px;
}
Tailwind版
<h3
class="relative pr-10
after:content-['NEW'] after:absolute after:right-0 after:top-1/2
after:-translate-y-1/2 after:bg-red-600 after:text-white
after:text-[10px] after:px-2 after:py-0.5 after:rounded-full"
>
新サービス開始のお知らせ
</h3>
content を使うときの重要ポイント（深掘り）
content は「疑似要素の存在証明」
::before や ::after は、content がないと存在しません。
これは CSS の仕様であり、疑似要素の本質です。
空文字なら装飾
文字ならラベル
絵文字ならアイコン
attr() なら属性値の表示
Tailwind では content-[''] や content-['NEW'] のように書く。
position と組み合わせると自由度が爆発する
疑似要素を装飾として使うときは、
ほぼ必ず position: absolute とセットになります。
親に position: relative
疑似要素に position: absolute
この組み合わせで、
「親の中の好きな場所に好きな装飾を置く」ことができます。
HTML を汚さずに UI をリッチにできる
content の最大の魅力はここです。
HTML に余計なタグを増やさずに
線・アイコン・バッジ・背景装飾を追加できる。
これは きれいなマークアップと美しいデザインを両立するための重要な技術です。
まとめ
content は疑似要素の核となるプロパティで、
UI をリッチにするための強力な武器です。
CSS では
content が必須
position と組み合わせる
装飾・ラベル・アイコンを自由に追加できる
Tailwind では
after:content-[”] や before:content-[”] を使う
relative と absolute をセットで使う
疑似要素のすべてのプロパティに before: / after: を付ける
