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

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

      2019/11/25   hatano

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

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

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

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

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


<p>テキスト</p>


p:before{
	content: "■";
}
p:after{
	content: "→";
}

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

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

疑似要素の装飾

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

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


<div></div>


div:before{
	content: "ボタン";
	display: block;
	width: 200px;
	height: 40px;
	line-height: 40px;
	background-color: #333;
	text-align: center;
	color: #fff;
}
div:hover:before{
	content: "クリックしてね";
	background-color: #f00;
}

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

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

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


p:before{
	content: "";
	display: inline-block;
	width: 30px;
	height: 30px;
	background-image: url(../image/arrow16.png);
	background-size: 100% auto;
	margin-right: 5px;
	margin-top: -4px;
	vertical-align: middle;
}

指定の注意点

:before, :after内に:before, :afterを入れ子にすることはできません。下記のように指定した場合、aのみ表示され、bは表示されません。


p:before{ content: "a"; }
p:before:before{ content: "b"; }

また、1つの要素に指定できる:before, :afterは各1つずつです。それ以上の:before, :afterを同時指定することはできません。

SEOでの疑似要素の注意点

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

まとめ

  • before疑似要素、after疑似要素は、CSSで要素をつくることができる
  • contentプロパティの値は、「テキスト」「空」の指定ができる
  • SEO対策として、重要なテキストを擬似要素で指定しない