CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － 疑似要素 ::after

Web APP CSS
スポンサーリンク

疑似要素 ::after を“自在に扱えるようになる”ための実践ガイド

::after は、::before と並んで HTML を増やさずに装飾を追加できる最強の CSS テクニックです。
名前の通り「要素の後ろにもう1つの“見た目だけの要素”を追加する」ための仕組みで、
区切り線・アイコン・バッジ・吹き出しのしっぽなど、幅広い UI に使われます。

初心者でも迷わないように、CSS と Tailwind CSS の両方で丁寧に解説します。

::after の基本ルール

content が必須（ここが最重要）

::after は、content を書かないと 存在しません。

.title::after {
  content: "";
}
CSS

空文字でもいいので、必ず content を書く。
これは「おまじない」ではなく、疑似要素を出現させるための絶対条件です。

見出しの後ろにラインを付ける例（CSS）

CSS の書き方

.section-title {
  position: relative;
  padding-right: 20px;
  font-weight: bold;
  font-size: 20px;
}

.section-title::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 40px;
  height: 2px;
  background: #3182ce;
  transform: translateY(-50%);
}
CSS

HTML

<h2 class="section-title">お知らせ</h2>
HTML

見出しの右側に「横線」が生まれます。
HTML を増やさずに装飾できるのが疑似要素の強みです。

Tailwind CSS で同じデザインを書く

Tailwind は疑似要素を直接サポートしていないため、
after: プレフィックスと after:content-[''] を使います。

<h2
  class="relative pr-6 font-bold text-xl
         after:content-[''] after:absolute after:right-0 after:top-1/2
         after:w-10 after:h-[2px] after:bg-blue-600
         after:-translate-y-1/2"
>
  お知らせ
</h2>
HTML

Tailwind で疑似要素を使うときのポイントは次の2つです。

1つ目は after:content-[''] を必ず書くこと。
2つ目は after: をすべてのプロパティにつけること。

テキストの後ろにアイコンを付ける例

CSS 版（絵文字アイコン）

.link-with-icon {
  position: relative;
  padding-right: 20px;
  color: #3182ce;
  text-decoration: none;
}

.link-with-icon::after {
  content: "→";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
CSS

HTML

<a href="#" class="link-with-icon">詳しく見る</a>
HTML

テキストの後ろに矢印を追加できます。

Tailwind 版（絵文字アイコン）

<a
  href="#"
  class="relative pr-5 text-blue-600 no-underline
         after:content-['→'] after:absolute after:right-0 after:top-1/2
         after:-translate-y-1/2"
>
  詳しく見る
</a>
HTML

Tailwind では after:content-['→'] のように書きます。

ボックスの右下に飾りを付ける例

CSS 版

.box {
  position: relative;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
}

.box::after {
  content: "";
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 12px;
  height: 12px;
  background: #e53e3e;
  border-radius: 50%;
}
CSS

HTML

<div class="box">内容</div>
HTML

右下に丸い飾りが付きます。

Tailwind 版

<div
  class="relative p-5 bg-white rounded-xl
         after:content-[''] after:absolute after:bottom-2 after:right-2
         after:w-3 after:h-3 after:bg-red-600 after:rounded-full"
>
  内容
</div>
HTML

::after を使うときの重要ポイント（深掘り）

content が疑似要素の「存在証明」

::after は content がないと 存在しない。
これは CSS の仕様であり、疑似要素の本質です。

空文字なら装飾
文字ならラベル
絵文字ならアイコン

Tailwind では after:content-[''] や after:content-['NEW'] のように書く。

position とセットで使うのが基本

::after を装飾として使うときは、
ほぼ必ず position: absolute とセットになります。

親に position: relative
疑似要素に position: absolute

この組み合わせで「親の中の好きな場所に装飾を置く」ことができます。

Tailwind では relative と after:absolute をセットで使う。

HTML を汚さずに UI をリッチにできる

::after の最大の魅力はここです。

HTML に余計なタグを増やさずに
線・アイコン・バッジ・背景装飾を追加できる。

これは きれいなマークアップと美しいデザインを両立するための重要な技術です。

例題：ニュースタイトルの後ろに「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;
}
CSS

HTML

<h3 class="news-title">新サービス開始のお知らせ</h3>
HTML

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>
HTML

まとめ

::after は、UI をリッチにするための強力な疑似要素です。

CSS では
content が必須
position と組み合わせる
HTML を増やさずに装飾できる

Tailwind では
after:content-[”] を忘れない
after:〜 のユーティリティを積み重ねる
relative とセットで使う

スポンサーリンク
タイトルとURLをコピーしました