CSSの擬似要素

擬似要素とは、要素内にある特定の文字や行のスタイルを指定するものです。たとえば、「::first-letter」という擬似要素を利用すると、指定した要素内のテキストの最初の１文字目だけを指定してスタイルを調整することができます。

擬似要素には、「::first-letter」以外にも、「::first-line」「::before」「::after」などがあり、こられを使用することによってHTMLには変更を加えることなく、スタイルを変更したり、文字や画像を挿入したりすることができるようになります。

擬似要素の基本的な使い方

擬似要素を使う場合は、スタイルを適用したい要素の後に「::」（コロンを２つ）付けて、その後に擬似要素名を記入します。ただし、これは現在主流で使われているCSS3での記述方法で、以前のバージョンであるCSS2を使っている場合はコロンは１つで指定します。

なお、現在のCSS3では、「:」（コロンが１つ）の場合は擬似クラス、「::」（コロンが２つ）の場合は擬似要素と区別されています。

擬似要素の種類と使用例

主な擬似要素には次のようなものがあります。

::first-letter

指定した要素の１文字目だけにスタイルを適用します。

たとえば、次にように指定することでp要素の最初の１文字だけが文字色が赤くなり、フォントサイズを150%で表示します。

p::first-letter {
  font-size: 150%;
  color: red;
}

表示例

最初１文字目だけが大きくなり赤くなる

::first-line

指定した要素の１行目だけにスタイルを適用します。

たとえば、次のように指定することで、「example」クラスを指定したテキストの１行目だけが赤くなり、太文字で表示されます。

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

表示例

ここに表示されている文章は最初の１行目だけにスタイルが適用されて文字色が赤くなり太文字で表示されます。ディスプレイの大きさやブラウザの表示領域の違いにより１行の文字数が変わった場合でも、それぞれの１行目だけが抽出されてスタイルが適用されます。

::before

指定した要素の直前に擬似要素を追加します。「::before」を使用する場合は、contentプロパティを使用して挿入するコンテンツを指定します。

たとえば、「example」クラスを指定したテキスト「サンプルテキスト」の前に赤色の「●」を追加したい場合は次のように指定します。

.example::before {
  content: '●';
  color: red;
}

表示例

サンプルテキスト

::after

指定した要素の直後に擬似要素を追加します。「::after」を使用する場合も、contentプロパティを使用して挿入するコンテンツを指定します。

たとえば、「example」クラスを指定したテキスト「サンプルテキスト」の後に赤色で【CSSの基礎知識】という文字を追加したい場合は、次のようなコードとなります。

.example::after {
  content: '【CSSの基礎知識】';
  color: red;
}

表示例

サンプルテキスト

contentプロパティ使用の注意点

擬似要素の「::before」や「::after」を使用するときは、必ずcontentプロパティを指定しなければなりません。

contentプロパティを使用することにより、統一感を持ったデザインが容易にできるようになるなどのメリットがあります。しかし、注意しなければならない点もあります。

contentプロパティで指定した内容は、テキストと認識されないため検索エンジンなどでは表示されません。contentプロパティに重要なキーワードを入れてしまった場合、SEOで不利になることも考えられるので注意してください。