目次
CSSの疑似要素とは？
疑似要素（Pseudo-elements）とは、
HTMLに存在しない“仮想の要素”をCSSだけで追加できる仕組みのことです。
特に有名なのがこちらの2つ：
::before（要素の 前 に追加される仮想要素）::after（要素の 後 に追加される仮想要素）
これらを使えば、HTMLを増やさずにデザインを作り込めるため、
綺麗なマークアップ × 高度なデザインを同時に実現できます。
疑似要素の基本構文
.selector::before {
content: "";
/* 装飾 */
}疑似要素を使う際は 必ず content プロパティが必要です。
（空の文字列でも OK）
::before と ::after の違い
| 疑似要素 | 役割 |
|---|---|
::before |
要素の内容の手前に表示される |
::after |
要素の内容の後ろに表示される |
位置の違いだけで、できることはほぼ同じです。
よく使われる疑似要素の実例
① タイトル横にラインを付ける
h2::before {
content: "";
display: inline-block;
width: 8px;
height: 24px;
background: #4087bf;
margin-right: 8px;
}→ 見出しデザインで頻出。
② リストの頭にオリジナルの丸をつける
li::before {
content: "";
width: 8px;
height: 8px;
background: #ff8f8f;
border-radius: 50%;
display: inline-block;
margin-right: 6px;
}③ ボタンに矢印アイコンをつける
.btn::after {
content: "";
background-image: url('/public/img/chevron-right-solid-full-white.svg');
width: 14px;
height: 14px;
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
margin-left: 8px;
}④ 吹き出しの三角を作る（サイトで使いやすい！）
.balloon::after {
content: "";
position: absolute;
bottom: -10px;
left: 20px;
border-width: 10px;
border-style: solid;
border-color: #faf7f5 transparent transparent transparent;
}⑤ 装飾背景を追加する（あなたがよく使う用途）
.section::before {
content: "";
position: absolute;
inset: 0;
background: url('/public/img/bg_pattern.png') no-repeat center/cover;
opacity: 0.15;
pointer-events: none;
}HTML を増やさず背景装飾ができるため、
現代の Web デザインでは必須テクニックです。
疑似要素を使うときの注意点
① content が必須
入れ忘れると疑似要素は生成されません。
② position をよく使う
装飾系は position: absolute; が必須になるケースが多いです。
③ 本文と重ならないように z-index を管理
意図せず本文の上に重なると読めなくなります。
④ 画像の装飾は “あくまで補助”
アイコン的な画像を入れるのは OK。
メインの画像を疑似要素に入れるのは非推奨です。
実務での“疑似要素の使いどころ”
- 見出しのデザイン調整
- セクション背景の装飾
- ボタンの矢印・アイコン追加
- リストのカスタムマーカー
- 下線や強調線のデザイン
- 枠線を二重にする
- カードの飾りパターンをつける
あなたのサイトでも、ブログカードや見出し装飾で多用されています。
結論：疑似要素は「HTMLを汚さないデザイン技術」
HTML の構造はそのままに、CSS だけでデザイン性を高められる。
だから Web 制作現場では before / after が必須スキルです。