HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

応用63. CSSで要素をつくる疑似要素(:before, :after)

      2017/07/11

before疑似要素、after疑似要素とは

before疑似要素、after疑似要素を使うと、CSSで要素をつくることができます。

  • before疑似要素(:before)・・・指定した要素内の先頭に
  • after疑似要素(:after)・・・指定した要素内の後方に

疑似要素の指定方法は、疑似クラスと同じです。
疑似要素は、clearfixにも使用されています。
指定方法は、要素またはclass名、id名の後ろに :(コロン)をつけて指定します。
疑似要素で表示する内容は、contentプロパティで指定します。
下記は、p要素のテキストの先頭に「■」後方に「→」を挿入した例です。

before疑似要素、after疑似要素で記号をした場合

疑似要素の装飾

疑似要素は、プロパティのない無属性の要素だと思えばいいでしょう。
初期では、インラインテキストと同じ状態です。疑似要素はCSSで装飾ができます。
下記は、空のdiv要素にbefore疑似要素を指定し、ボタンにしたものです。
疑似クラスを組み合わせることもできます。
:hover疑似クラスを使い、hover時に背景色と文字を変更しています。
:hoverと:beforeを入れえると、hoverの指定が効かないので注意してくだい。

疑似要素でボタンをつくる
疑似要素と疑似クラスの組み合わせ

疑似要素で画像を表示する

before疑似要素、after疑似要素のcontentプロパティに画像を指定することもできます。
値にurl( )を指定し、cssからの相対パスで画像を指定します。
画像をテキストの上下中央にするために、vertical-align: middle; も指定しています。
使用した画像は下記からダウンロードできます。

矢印アイコン

疑似要素で画像を指定

注意点として、widthプロパティheightプロパティでのサイズ変更はできません。
サイズ変更は、CSS3から追加されたtransformプロパティを使用することで可能です。
※Internet Explorerは、9以上から対応。 ベンダープレフィックスが必要。
transformプロパティを使用する場合は、display: inline-block; または display: block; も同時に指定します。
縮小の場合、値は0.1〜1となり、10%〜100%の大きさになります。拡大したい場合は、例として1.2で指定すると120%で拡大されます。
下記は、50%の大きさに縮小した場合です。

疑似要素で指定した画像のサイズをtransformで変更

疑似要素に背景画像を指定する

先程のcontentプロパティで画像を指定した場合、細かいサイズや位置調整が難しくなります。
その場合、background-imageで指定する方法もあります。
content: ""; で空要素を作り、アイコンサイズの幅と高さを指定します。
背景画像で指定した場合、位置が少し下になるので、margin-topで微調整をします。
背景画像のサイズは、backround-sizeプロパティを使います。
画像の元サイズは16px X 16pxです。

疑似要素に背景画像を指定

SEOでの疑似要素の注意点

contentプロパティで指定したテキストは、検索サイトは読み取ることができません。
SEO対策のため、重要なテキストを疑似要素で使用しないようにしましょう。

疑似要素のコロンが2つのケース

疑似要素は、下記のように「コロン : 」と「ダブルコロン :: 」での指定ができます。
:before
::before
どちらの記述もブラウザは認識しますし、機能も変わりません。
では、なぜ2つの書き方があるのか。
それは、CSS3から擬似クラスと差別化するために「ダブルコロン :: 」で指定できるように変更されたからです。
しかし、擬似要素は、CSS3以前から使用できるため、どちらの書き方でも大丈夫となっているわけです。
注意点は、IE8に対応させる場合です。IE8は、「コロン : 」で指定する必要があります。
対応させるブラウザに注意して、どちらを使うかを決めておきましょう。

まとめ

  • before疑似要素、after疑似要素は、CSSで要素をつくることができる
  • contentプロパティの値は、「テキスト」「画像」「空」の指定ができる
  • contentプロパティに画像を指定した場合、サイズ変更は tranformプロパティを使う
  • SEO対策として、重要なテキストを擬似要素で指定しない

 - HTML・CSS