Webサイトを作っていて、「見出しの横にアイコンをつけたいな」とか「文字の下におしゃれな線を引きたいな」と思った時、わざわざHTMLに <img> や <span> を追加していませんか？
デザインのためだけにHTMLのタグを増やすのは、コードが汚くなるのであまり良くありません。
そんな時に活躍するのが、CSSだけで架空の要素を作り出す魔法、「擬似要素（Pseudo-elements）」です。
::before と ::after。この2つを使いこなせば、あなたのコーディング力は「プロ級」になります！
擬似要素＝「CSSで作る幽霊」
擬似要素とは、その名の通り「ニセモノの要素」です。
HTMLには存在しないけれど、画面上には存在する「幽霊（ゴースト）」のようなものを作れます。
- ::before（ビフォー）：要素の直前に幽霊を作る。
- ::after（アフター）：要素の直後に幽霊を作る。
【最重要】幽霊を呼び出す「content」プロパティ
擬似要素を使う時の絶対的なルール。
それは、「content（中身）を指定しないと現れない」ということです。
.box::before {
content: "★"; /* 星マークを表示 */
color: red;
}たとえ中身を空っぽにしたい場合（線や図形を作りたい時）でも、以下のように空文字を指定する必要があります。
.box::after {
content: ""; /* 空っぽでも必須！これを忘れると何も出ません */
width: 10px;
height: 10px;
background-color: blue;
display: block; /* 幽霊は初期状態がinlineなので、箱にするならblockかinline-blockにする */
}初心者が「擬似要素が効かない！」と悩む原因の9割は、この content: ""; の書き忘れです。
実践1：おしゃれな「2色下線」の見出し
では、実務でよく使うテクニックです。
h2 タグそのものにグレーの下線を引き、::after で青い短い線を重ねることで、凝ったデザインを作ります。
ここで、以前習った「position: absolute（絶対配置）」が大活躍します！
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
h2 {
position: relative; /* 1. 親（幽霊の基準点）にする */
padding-bottom: 10px;
border-bottom: 2px solid #ddd; /* 全体のグレーの下線 */
}
h2::after {
content: ""; /* 2. 必須！中身は空っぽ */
/* 3. 青い線を作る */
display: block;
width: 60px; /* 線の長さ */
height: 2px; /* 線の太さ */
background-color: #00bcd4; /* 線の色 */
/* 4. 配置を決める */
position: absolute;
bottom: 0; /* 一番下に配置（グレーの線と重なる） */
left: 0; /* 左端に配置 */
}
</style>
</head>
<body>
<h2>擬似要素のデザイン</h2>
<p>↑ 見出しの下線を見てください。左側だけ青くなっていますか？</p>
</body>
</html>実践2：CSSだけで「吹き出し」を作る
応用編です。LINEのような「吹き出し」のしっぽ（三角形）も、実は擬似要素で作られています。
「border（枠線）」を使った古典的なトリックを使います。
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
/* 吹き出し本体 */
.speech-bubble {
position: relative; /* 基準点 */
background-color: #81d4fa; /* 水色 */
padding: 20px;
border-radius: 10px;
width: 300px;
color: #333;
}
/* しっぽ（三角形） */
.speech-bubble::before {
content: "";
position: absolute;
/* 本体の上、真ん中あたりに配置 */
top: -20px;
left: 50%;
transform: translateX(-50%);
/* 三角形を作る魔法の記述（今はコピペでOK！） */
border: 10px solid transparent; /* 透明な太い枠線 */
border-bottom-color: #81d4fa; /* 下の枠線だけ色をつける */
}
</style>
</head>
<body>
<br><br>
<div class="speech-bubble">
CSSだけで吹き出しが作れました！<br>
上の三角形は「::before」で作っています。
</div>
</body>
</html>まとめ：HTMLは「構造」、CSSは「装飾」
擬似要素を使うメリットは、HTMLコードがスッキリすることです。
「デザインのための飾り」は、できるだけHTMLに書かず、CSSの ::before や ::after に任せる。
これができるようになれば、あなたはもう「CSS中級者」です。
色々なサイトを見て、「これ擬似要素かな？」と予想してみるのも楽しいですよ！