CSS擬似要素とは？CSSの代表的な擬似要素や基本的な使い方について解説

Webサイトを作っていると「テキストの前にアイコンを付けたい」「見出しの左に装飾ラインを引きたい」といった対応が必要になる場面があります。
これらは、HTMLに新しいタグを追加して対応することもできますが、見た目だけのために要素を増やすとコードが複雑になってしまいます。
そこで活用したいのが、CSSの擬似要素です。

擬似要素を利用すれば、HTMLを一切変更せず、CSSだけで要素の前後や特定の部分にスタイルを適用できます。

この記事では、CSS擬似要素とは何か？CSSの代表的な擬似要素や、基本的な使い方について解説します。

Contents

1 擬似要素とは
2 よく使われる擬似要素
- 2.1 (1)beforeとafter
- 2.2 (2)その他の擬似要素
3 擬似要素の応用例
- 3.1 (1)見出しの左に装飾ラインを引く
- 3.2 (2)ホバー（hover）時にツールチップを表示する

擬似要素とは

擬似要素とは、CSSのセレクターに付加する特別なキーワードで、擬似要素を使うことでHTMLで記述されていない仮想の要素（要素そのものではない）を作り出し、指定した要素の特定の部分にスタイルを適用することができる機能です。

擬似要素は「::」(コロン2つ)で記述します。

セレクター::擬似要素名 {
　　　プロパティ: 値;
}

※CSS3より前のバージョンでは「:」(コロン1つ)で書かれていました。古いブラウザとの互換性のためコロン1つでも動作しますが、基本的にはコロン2つで書くようにしてください。

よく使われる擬似要素

(1)beforeとafter

擬似要素の中でも特によく使われるのが「::before」と「::after」で、セレクターで指定した要素の前後に仮想の要素を挿入することができます。

種類	説明	記述例
before	指定した要素の「直前」に仮想の要素を挿入します。	p::before { 　　content: “<<“; 　　color: blue; }
after	指定した要素の「直後」に仮想の要素を挿入します。	p::after { 　　content: “>>”; 　　color: red; }

例）style.css

p::before {
　　content: “■”;
　　color: blue;
}

p::after {
　　content: “▲”;
　　color: red;
}

例）index.html

<html>
<head>
　　<title>ページのタイトル</title>
　　<style>
　　　　@import url(style.css)
</style>
</head>
<body>
　　<div>
　　　　<p>CSSの擬似要素のテストです</p>
　　</div>
</body>
</html>

ブラウザでの表示結果

contentは要素の中身を指定するためのプロパティで、::beforeや::afterを使用するときは指定が必須です。
contentプロパティを記述しないと擬似要素は表示されません。
contentプロパティには表示したい文字列のほか、HTML属性の値なども指定できます。

例）style.css

<!- – 文字列を表示する – ->
p.test1::before {
　　content: “[NEW]”;
}

<!- – 絵文字を追加する – ->
p.test2::before {
　　content: “⛅”;
}

<!- – 画像URLを追加する – ->
p.test3::before {
　　content: url(“crown.png”);
}

※以下の画像を「crown.png」というファイル名で、CSSと同じフォルダにコピーしてください。

例）index.html

<html>
<head>
　　<title>ページのタイトル</title>
　　<style>
　　　　@import url(style.css)
　　</style>
</head>
<body>
　　<div>
　　　　<p class=”test1″>先頭に文字列を表示</p>
　　　　<p class=”test2″>先頭に絵文字を表示</p>
　　　　<p class=”test3″>先頭に画像を表示</p>
　　</div>
</body>
</html>

ブラウザでの表示結果

CSSのみで装飾を表現する場合などで文章・画像の挿入が不要なときは、contentプロパティに空文字（””）を指定してください。

例）style.css

<!- – CSSで赤丸を表示する – ->
p::before {
　content: “”;
　display: inline-block;
　width: 10px;
　height: 10px;
　border-radius: 50%;
　background-color: red;
}

例）index.html

<html>
<head>
　　<title>ページのタイトル</title>
　　<style>
　　　　@import url(style.css)
　　</style>
</head>
<body>
　　<div>
　　　　<p>CSSの擬似要素のテストです</p>
　　</div>
</body>
</html>

ブラウザでの表示結果

(2)その他の擬似要素

::beforeと::after以外にも、よく使われる擬似要素があります。

種類	説明	記述例
first-line	テキストの最初の1行目だけにスタイルを適用します。ウィンドウ幅が変わって折り返し位置が変わっても、常に1行目に適用されます。	p::first-line { 　　font-weight: bold; 　　color: red; }
first-letter	テキストの最初の1文字だけにスタイルを適用します。	p::first-letter { 　　font-weight: bold; 　　font-size: 3em; }
selection	ユーザーがテキストを選択したときの見た目をカスタマイズできます。	p::selection { 　　background-color: green; 　　color: white; }
placeholder	inputやtextarea要素のplaceholder属性で指定したヒントテキストのスタイルを変更できます。	input::placeholder { 　　color: gray; 　　font-style: italic; }

first-line

例）style.css

p::first-line {
　　font-weight: bold;
　　color: red;
}

例）index.html

<html>
<head>
　　<title>ページのタイトル</title>
　　<style>
　　　　@import url(style.css)
　　</style>
</head>
<body>
　　<div>
　　　　<p>1行目<br>2行目<br>3行目</p>
　　</div>
</body>
</html>

ブラウザでの表示結果

first-letter

例）style.css

p::first-letter {
　　font-weight: bold;
　　font-size: 3em; <!- – 最初の文字を3倍の大きさにする – ->
}

例）index.html

<html>
<head>
　　<title>ページのタイトル</title>
　　<style>
　　　　@import url(style.css)
　　</style>
</head>
<body>
　　<div>
　　　　<p>最初の文字だけ大きくなります</p>
　　</div>
</body>
</html>

ブラウザでの表示結果

selection

例）style.css

p::selection {
　　background-color: green;
　　color: white;
}

例）index.html

<html>
<head>
　　<title>ページのタイトル</title>
　　<style>
　　　　@import url(style.css)
　　</style>
</head>
<body>
　　<div>
　　　　<span>テキストを選択したときのスタイル指定なし</span>
　　　　<p>テキストを選択したときのスタイル指定あり</p>
　　</div>
</body>
</html>

ブラウザでの表示結果（初期表示）

ブラウザでの表示結果（span要素のテキストの一部を選択）

ブラウザでの表示結果（p要素のテキストの一部を選択）

placeholder

placeholder（プレースホルダー）は、テキストボックスなどの入力欄が空のときに、入力例やユーザー向けの案内を表示する機能です。多くのブラウザにおいて薄いグレーでテキストが表示されますが、擬似要素を使うと自由にスタイルを変更することができます。

例）style.css

input.test::placeholder {
　　color: blue;
　　font-weight: bold;
}

例）index.html

<html>
<head>
　　<title>ページのタイトル</title>
　　<style>
　　　　@import url(style.css)
　　</style>
</head>
<body>
　　<div>
　　　　<input type=”text” placeholder=”お名前を入力してください”><!– 通常のレイアウト確認用 –>
　　　　<input type=”text” class=”test” placeholder=”お名前を入力してください”>
　　</div>
</body>
</html>

ブラウザでの表示結果（初期表示）

ブラウザでの表示結果（テキストボックスに入力後）

擬似要素の応用例

ここでは、実務でよく使用する擬似要素の応用的なユースケースをご紹介します。

(1)見出しの左に装飾ラインを引く

::beforeを使用して、見出しの左へ装飾ラインを追加します。ニュースサイトやブログでよく見るデザインです。

例）style.css

h2::before {
　content: “”;
　display: inline-block;
　vertical-align: middle;
　width: 5px;
　height: 1em;
　background-color: steelblue;
　border-radius: 2px;
　margin-right: 8px;
}

例）index.html

<html>
<head>
　　<title>ページのタイトル</title>
　　<style>
　　　　@import url(style.css)
　　</style>
</head>
<body>
　　<div>
　　　　<h2>見出しの左に装飾ラインを引きます</h2>
　　</div>
</body>
</html>

ブラウザでの表示結果

(2)ホバー（hover）時にツールチップを表示する

::afterとcontentプロパティを組み合わせると、JavaScriptを使わずにホバー時のツールチップ（説明文）を表示することができます。
※ホバー（hover）とは、Webページ上のボタンや画像にマウスカーソルを重ねるだけで、クリックしなくても見た目や表示を変化させる機能。

例）style.css

.tooltip {
　position: relative;
　cursor: pointer;
}

.tooltip::after {
　content: attr(data-tooltip);
　display: none;
　position: absolute;
　top: 125%;
　left: 0;
　background-color: dimgray;
　color: white;
　padding: 4px 8px;
　border-radius: 4px;
}

.tooltip:hover::after {
　display: block;
}

例）index.html

<html>
<head>
　　<title>ページのタイトル</title>
　　<style>
　　　　@import url(style.css)
　　</style>
</head>
<body>
　　<div>
　　　　<span class=”tooltip” data-tooltip=”詳しい説明はこちら”>ここにホバーしてください</span>
　　</div>
</body>
</html>

ブラウザでの表示結果（初期表示）