HTML / CSS
基礎
CSS
疑似要素
before・after
疑似要素 before / after を使ってみよう
更新日：2026-08-02
ここまでで、
transformtransitionopacityz-index
などを使って、動きや重なりを学びました。
今回は、
HTMLを書かずに装飾を追加する
ための、
::before
::after
を学びます。
実際のWeb制作では、かなり大量に使われています。
今回使用するファイル構成
この回では、次のファイルを使用します。
html-practice/
├── index.html
└── css/
└── style.css
疑似要素とは？
疑似要素は、
「存在しない要素」をCSSで作る
イメージです。
例えば、
- 装飾線
- アイコン
- 背景
- オーバーレイ
- 吹き出しの三角
などを作れます。
before と after
主に使うのは以下です。
::before
::after
名前の通り、
before = 要素の前after = 要素の後
へ追加されます。
最初のサンプル
<p class="sample">
サンプルテキスト
</p>
.sample::before {
content: "注：";
}
すると、
注：サンプルテキスト
のように表示されます。
content が必要
ここは超重要です。
疑似要素は、
content
を書かないと表示されません。
.sample::before {
content: "";
}
空文字でも必要です。
初心者がかなりハマるポイントです。
after の例
.sample::after {
content: "！";
}
すると、
サンプルテキスト！
になります。
装飾線を作る
実務ではこちらが超頻出です。
<h2 class="title">
タイトル
</h2>
.title {
position: relative;
display: inline-block;
}
.title::after {
content: "";
position: absolute;
left: 0;
bottom: -8px;
width: 100%;
height: 4px;
background-color: #2563eb;
}
なぜ position が必要？
これもかなり重要です。
position: absolute;
を使うため、
親側に、
position: relative;
が必要です。
つまり、
before / after は position とセットで使われることが多い
です。
display: inline-block が必要な理由
h2 は初期状態で、
display: block;
です。
そのままだと、
下線が横幅いっぱい
になることがあります。
display: inline-block;
にすると、
文字幅に合わせられる
ようになります。
hover と組み合わせる
ここからかなりWeb制作っぽくなります。
下線アニメーション
<a href="#" class="link">
ABOUT
</a>
.link {
position: relative;
color: #111;
text-decoration: none;
}
.link::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 0;
height: 2px;
background-color: #2563eb;
transition: 0.3s;
}
.link:hover::after {
width: 100%;
}
何が起きている？
最初は、
width: 0;
なので線が見えません。
hoverすると、
width: 100%;
になり、
左から線が伸びる
アニメーションになります。
overlay を作る
画像の上に黒い半透明を重ねるのもよくあります。
<div class="card">
<img src="image.jpg" alt="">
</div>
.card {
position: relative;
}
.card::after {
content: "";
position: absolute;
inset: 0;
background-color: rgba(0,0,0,0.4);
}
inset: 0 とは？
これは、
top: 0;
right: 0;
bottom: 0;
left: 0;
の省略です。
最近かなり使われています。
before / after は重なる
疑似要素は、
要素の上に重なる
ことがあります。
そのため、
z-index
を使うことも多いです。
ボタンに光を流す
実際のサイトではかなりよくあります。
.button {
position: relative;
overflow: hidden;
}
.button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.3);
transition: 0.5s;
}
.button:hover::before {
left: 100%;
}
overflow: hidden が必要
これがないと、
光がはみ出して見える
ことがあります。
ここでも overflow が活躍しています。
実際かなり使われる
before / after は本当に頻出です。
例えば、
- ハンバーガーメニュー
- カード装飾
- ボーダーアニメーション
- 吹き出し
- モーダル背景
- hover演出
など。
まとめ
今回は、
::before
::after
を学びました。
- HTMLを書かずに装飾できる
contentが必要positionと組み合わせることが多いhovertransitiontransform
と組み合わせると、一気にWeb制作っぽくなります。