HTML/CSS基礎 2025.10.17

【CSS疑似要素】before/afterで線・図形・装飾を自在に描く

コンテンツ 非表示

1 第1章：疑似要素の基礎

2 第2章：ライン装飾（セクション見出し）

第1章：疑似要素の基礎

::beforeと::afterは、要素の前後に「疑似的な箱」を増やします。HTMLを汚さずに装飾を追加できます。


.title::after{
 content:""; 
 display:block; 
 width:60px; 
 height:3px;
 background:#4a8fd8; 
 margin-top:8px; 
 border-radius:2px;
}

第2章：ライン装飾（セクション見出し）


.section-title{ 
 position:relative; 
 padding-bottom:12px; 
}
.section-title::after{
 content:""; 
 position:absolute; 
 left:0; bottom:0;
 width:80px; 
 height:4px; 
 background:#a7d1f0; 
 border-radius:2px;
}

positionで親をrelativeにしておくのがコツ。

第3章：三角形・リボン


.ribbon{
 position:relative; 
 background:#e9f4fb; 
 padding:10px 16px; 
 display:inline-block;
}
.ribbon::after{
 content:""; 
 position:absolute; 
 right:-10px; 
 top:50%; 
 transform:translateY(-50%);
 border-width:8px 0 8px 10px; 
 border-style:solid;
 border-color:transparent transparent transparent #e9f4fb;
}

第4章：吹き出し（バルーン）


.balloon{ 
 position:relative; 
 background:#e9f4fb; 
 padding:14px 16px; 
 border-radius:12px; 
}
.balloon::after{
 content:""; 
 position:absolute; 
 bottom:-10px; 
 left:30px;
 border-width:10px 10px 0; 
 border-style:solid;
 border-color:#e9f4fb transparent transparent;
}

注意： 擬似要素は通常クリックを受けません。装飾をボタン上に重ねるときはpointer-events:none;を検討。

第5章：z-indexと重なり順


.badge{ 
 position:relative; 
 z-index:1; 
}
.badge::before{ 
 content:""; 
 position:absolute; 
 inset:0; 
 z-index:-1; 
}

重なり順が崩れたら「positionが付いているか」「スタッキングコンテキスト」ができていないかを疑う。

まとめ

HTMLを増やさず軽量装飾を追加できる
必ずcontent:""を忘れずに
positionで親子関係を意識し、z-indexで重なりを制御

Blog