CSS ・ CSSの記法
疑似要素
要素の一部分や追加部分を指定する
要素の「最初の1文字」「前後に追加する装飾」のように、HTMLには書かれていない部分を作って指定する仕組みです。セレクタの後ろに「::（コロン2つ）」を付けて書きます。
01
サンプルコード
HTML
1<p class="intro">ようこそ、カフェ・ミモザへ。季節のケーキと自家焙煎のコーヒーをお楽しみください。</p>
2<h2 class="heading">メニュー</h2>
CSS
1.intro::first-letter {
2 font-size: 2em;
3 font-weight: bold;
4 color: #b68235;
5}
6.heading::before {
7 content: "■ ";
8 color: #b68235;
9}
10.heading::after {
11 content: " ―";
12 color: #ccc;
13}
02
実行結果
ブラウザでの表示
03
解説
疑似要素は、要素の中の「一部分」や、要素の前後に「追加する部分」を、HTMLに書かずにCSSだけで作って装飾する仕組みです。セレクタの後ろに :: を2つ付けて書きます。
上の例では、::first-letter で段落の最初の1文字だけを大きくし、::before・::after で見出しの前後に記号を追加しています。::before と ::after は content プロパティで中身を指定しないと表示されません。
疑似クラス（:hover など）は「既にある要素を条件で選ぶ」もの、疑似要素は「要素の一部分や新しい部分を作る」ものです。古い書き方では疑似要素もコロン1つ（:before）で書かれていましたが、今は区別するために :: を使います。
04
応用例・注意点
よく使う疑似要素
| 疑似要素 | 説明 |
|---|---|
::before | 要素の中身の先頭に追加（content が必要） |
::after | 要素の中身の末尾に追加（content が必要） |
::first-letter | 最初の1文字 |
::first-line | 最初の1行 |
::marker | リストの行頭記号・番号 |
::placeholder | 入力欄のプレースホルダー |
::selection | 利用者が選択した部分 |
選択したときの色を変える
::selection で、文字を選択したときの背景色を変えられます。
CSS
1::selection {
2 background: #ffe3bf;
3 color: #201f1d;
4}
疑似クラスと組み合わせる
疑似クラスの後ろに疑似要素を続けられます（順番は 疑似クラス → 疑似要素）。
CSS
1.link:hover::after {
2 content: " →";
3}
注意点
- 011つのセレクタに書ける疑似要素は1つだけで、セレクタの最後に書きます。
- 02::before・::after で追加した文字は、選択やコピーができず、読み上げも環境によって異なります。重要な情報はHTMLに書きます。
- 03img や input など、中身を持たない要素には ::before・::after が使えません。