Webサイトを作っていると「テキストの前にアイコンを付けたい」「見出しの左に装飾ラインを引きたい」といった対応が必要になる場面があります。
このとき、HTMLに新しいタグを追加して対応することもできますが、見た目だけのために要素を増やすとコードが複雑になってしまいます。
そこで活用したいのが、CSSの擬似要素です。擬似要素を利用すれば、HTMLを一切変更せず、CSSだけで要素の前後や特定の部分にスタイルを適用できます。
ここでは、CSSの代表的な擬似要素や、基本的な使い方について解説します。
Contents
擬似要素とは
擬似要素とは、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属性の値なども指定できます。
※contentは疑似要素特有のプロパティです。それ以外のプロパティ（colorやwidth、heightなど）は通常の要素に使うCSSとまったく同じように指定できます。
例）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; } |
※displayは要素の表示方法を指定するプロパティです。指定できる値に「block（要素を縦に並べる。サイズ指定可）」「inline（要素を横に並べる。サイズ指定不可）」「inline-block（要素を横に並べる。
サイズ指定可）」があります。::beforeのデフォルトのdisplayはinlineで、その状態ではサイズ指定が効かず赤丸が表示されないため、inline-blockを明示的に指定しています。
※border-radiusは、要素の角を丸くするためのプロパティです。widthとheightが同じサイズの正方形に50%を指定すると、綺麗な丸を表現できます。
なお、正方形や長方形など要素の形に関わらず、50%を超えた値を指定してもブラウザが自動調整するため見た目は変わりません。
例）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; /* 最初の文字を3倍の大きさにする */ } |
| 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; } |
※h2の前に::beforeを使って、幅5px・高さ1emの細長い長方形を挿入しています。border-radius: 2pxで角をわずかに丸くしています。
そのままだと長方形がテキストの下に揃ってしまうため、vertical-align: middleで縦方向の中央に揃え、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 { .tooltip:hover::after { |
※positionは要素の配置方法を指定するプロパティです。relativeを指定した要素が基準となり、absoluteを指定した要素はその基準をもとに位置が決まります。
今回は親要素の.tooltipにrelative、ツールチップにabsoluteを指定することで、ツールチップが.tooltipを基準に配置されるようになっています。
top: 125%で親要素の高さの125%分だけ下に、left: 0で親要素の左端に揃えて表示しています。
※background-color、color、border-radiusはツールチップの見た目を整えるための指定です。
background-colorでツールチップの背景色をダークグレー、colorで文字色を白に設定し、border-radiusで角を丸くしています。
例）index.html
| <html> <head> <title>ページのタイトル</title> <style> @import url(style.css) </style> </head> <body> <div> <span class=”tooltip” data-tooltip=”詳しい説明はこちら”>ここにホバーしてください</span> </div> </body> </html> |
※data-tooltipはカスタムデータ属性と呼ばれる仕組みで、data-から始まる名前であれば自由に属性を追加してデータを持たせることができます。
今回はツールチップに表示したい文字をここに入れています。
カスタムデータ属性については別の記事で詳しく紹介します。
ブラウザでの表示結果（初期表示）
ブラウザでの表示結果（ホバー時）
