【CSS】疑似要素について知ろう

CSSを記述する際に、「疑似要素」という言葉を聞いたことはありますか？
また、「疑似クラス」という言葉もあります。同じ「疑似」という単語がついていますが、これらは別物です。
今回は、「疑似要素」についてご紹介します。

疑似要素とは？

以下の記述を見てください。

 

上の記述では、「::first-letter」が疑似要素にあたります。
「::first-letter」を記述することで、「要素の1文字目にスタイルを指定する」ことができます。
SAMPLEでは1文字目が赤色になっていますね。

疑似要素とは、セレクタに付与することで、要素の特定の部分に対してスタイルを指定するもののことです。

ちなみに、コロンの数は昔は1つでしたが、CSS3では疑似クラスと区別するために、コロンの数は2つで書きます。
現状、定番の疑似要素はコロン1つでも適用されますが、CSS3では2つで書くようにしましょう。

疑似要素の例

::first-letter以外で代表的な疑似要素として、以下の3つがあります。

::before

要素の直前に、疑似的に要素を追加することができます。

上記のように記述することで、ページ上では

 

 

と表示させることができます。

::after

要素の直後に、疑似的な要素を追加することができます。
使い方は::before同じです。

 

::first-line

要素の1行目にのみ、スタイルを適用することが出来ます。
ただし、ブロックレベル要素にのみ適用されるため、インライン要素で使用することはできません。

 

疑似要素を使用するメリット

疑似要素を使用するメリットとして、HTMLがシンプルになることが挙げられます。例えば、「要素の1文字目にスタイルを指定する」を疑似要素無しで実現しようとすると、

のように、1文字目にspanで囲ってスタイルを適用する必要があります。
ところが、疑似要素::first-letterを使用することにより、spanで囲う必要が無くなります。

このように、HTMLに余計なタグを反映させる必要がなく、シンプルな記述ができることがメリットとなります。

疑似要素を使用するデメリット

HTMLがシンプルになることをメリットとして挙げましたが、これは使い方によってはデメリットにもなり得ます。例えば、before要素を使って以下のようなHTMLとCSSを実装したとします。

ページ上では FAX: 00-0000-0000 と表示されます。
しかし、「FAX:」はHTMLではなくCSSで装飾として実装されているため、検索エンジンは読み取ることが出来ません。これはSEOにも影響します。

また、音声読み上げツールにも影響します。大体の音声読み上げツールでは::beforeや::afterに記述されたcontentの値を読み上げることができますが、ブラウザとの組み合わせによっては読み上げられないこともあります。
その単語が無ければ正しく意味が通じないものを疑似要素で実装するのは、アクセシビリティの観点からも避けるべきでしょう。（アクセシビリティについて知りたい方はこちらもご覧ください【ウェブアクセシビリティの4原則とは？①知覚可能】）

こういった理由から、装飾目的の文字以外はHTMLで記述するのが望ましいと言えます。

まとめ

疑似要素、特に::beforeや::afterは使いこなせばHTMLの記述をスッキリさせたり、他のプロパティと組み合わせることで幅広い使い道があります。ぜひ着目してみてください。