before擬似要素、after擬似要素とは
before擬似要素、after擬似要素を使うと、CSSで要素をつくることができます。
- before擬似要素（:before）･･･指定した要素内の先頭に
- after擬似要素（:after）･･･指定した要素内の後方に
擬似要素の指定方法は、擬似クラスと同じです。
擬似要素は、clearfixにも使用されています。
指定方法は、要素またはclass名、id名の後ろに :（コロン）をつけて指定します。
擬似要素で表示する内容は、contentプロパティで指定します。
下記は、p要素のテキストの先頭に「■」後方に「→」を挿入した例です。
<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対策として、重要なテキストを擬似要素で指定しない