CSS疑似要素（::before・::afterなど）の使い方を徹底解説

CSS疑似要素（Pseudo Elements）とは？

CSSの疑似要素を使うと、要素の「最初の1文字」や「最初の行」など特定の部分だけにスタイルを適用したり、要素の前後に新しいコンテンツを挿入したりできます。装飾のための余計なHTMLを書かずに済むため、マークアップをすっきり保ちながら表現力を高められる便利な機能です。

ポイント： 疑似クラスと疑似要素を区別するため、CSS3以降では疑似要素はコロン2つ（ダブルコロン :: ）の記法で書くのが標準となっています。

基本構文

疑似要素は、対象となるセレクタの後ろにダブルコロンで続けて記述します。

Selector::pseudo-element {
    css-property: /*value*/;
}

主なCSS疑似要素の一覧

No.	疑似要素と説明
1	::after 指定した各要素のコンテンツの直後に内容を挿入します
2	::before 指定した各要素のコンテンツの直前に内容を挿入します
3	::first-letter 指定した各要素の最初の1文字を選択します
4	::first-line 指定した各要素の最初の1行を選択します
5	::placeholder フォーム要素のプレースホルダー（入力ヒント）テキストを選択します
6	::selection ユーザーがドラッグなどで選択（ハイライト表示）した範囲を選択します

ここからは、実際のコード例でCSS疑似要素の動きを確認していきましょう。

例1：::first-letter と ::first-line の使い方

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
    background-color: black;
}
p::first-line {
    background-color: lightgreen;
    color: white;
}
span {
    font-size: 2em;
    color: #DC3545;
}
</style>
</head>
<body>
<h2>Computer Networks</h2>
<p><span>A</span> system of interconnected computers and computerized peripherals such as printers is called computer network. </p>
</body>
</html>

出力結果

このコードでは、段落の最初の1文字（A）に黒い背景が適用され、最初の行全体には薄緑色の背景と白い文字色が設定されます。また、span要素で囲まれた「A」は2emの大きさで赤系の色で強調表示されます。

CSS疑似要素（::before・::afterなど）の使い方を徹底解説

例2：::before と ::after の使い方

<!DOCTYPE html>
<html>
<head>
<style>
div:nth-of-type(1) p:nth-child(2)::after {
    content: " LEGEND!";
    background: orange;
    padding: 5px;
}
div:nth-of-type(2) p:nth-child(2)::before {
    content: "Book:";
    background-color: lightblue;
    font-weight: bold;
    padding: 5px;
}
</style>
</head>
<body>
<div>
<p>Cricketer</p>
<p>Sachin Tendulkar:</p>
</div>
<hr>
<div>
<p><q>Chase your Dreams</q></p>
<p><q>Playing It My Way</q></p>
</div>
</body>
</html>

出力結果

この例では、1つ目のdiv内の2番目のp要素（Sachin Tendulkar:）の後ろに、オレンジ色の背景で「LEGEND!」というテキストが挿入されます。さらに、2つ目のdiv内の2番目のp要素の前には、水色の背景で太字の「Book:」が挿入されます。このようにcontentプロパティと組み合わせることで、HTMLを一切変更せずに視覚的な情報を追加できるのが大きな魅力です。

CSS疑似要素（::before・::afterなど）の使い方を徹底解説

まとめ

CSS疑似要素を活用すれば、要素の一部だけへのスタイリングや、HTMLを変更しないコンテンツの挿入が簡単に行えます。特に::beforeと::afterは、バッジやアイコン、装飾の追加など幅広い場面で使われる定番テクニックなので、ぜひマスターしておきましょう。

CSSのdisplayとvisibilityプロパティ徹底解説！全ての値と実用例を一覧で紹介

CSSセレクターで要素のスタイルを設定する方法をわかりやすく解説

CSSで兄弟要素を選択する方法｜隣接兄弟セレクタ（+）と一般兄弟セレクタ（~）の違いを解説
CSSには、同じ親要素を持つ「兄弟要素」を選択するための結合子が2種類用意されています。1つは隣接兄弟結合子（+）、もう1つは一般兄弟結合子（~）です。それぞれの動作の違いを理解して、目的に応じて使い分けましょう。隣接兄弟結合子（+）とは隣接兄弟結合子（+）は、最初のセレクタで指定した要素の直後に隣接している要素だけをマッチさせたい場合に使用します。2つのセレクタは、必ず同じ親要素の子要素である必要があります。 CSSにおける隣接兄弟結合子の構文は以下の通りです。 Selector + Selector { attribute: /*値*/ } 一般兄弟結合子（~）とは一方、2つ
CSSアニメーションで隠れた要素を滑らかに表示する方法
CSSアニメーションを活用すると、画面上に隠れている要素を滑らかに表示させることができます。マウスホバーなどのユーザー操作をトリガーにして、@keyframesによるアニメーションやopacityのトランジションを組み合わせれば、動きのある魅力的なインターフェースを手軽に実装できます。以下の例では、要素にカーソルを合わせると、非表示になっていた要素がアニメーションとともに現れるデモを紹介します。サンプルコード<!DOCTYPE html> <html> <style> .item { position: relative; &nbs