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

  1. ホーム
  2. HTML・CSS
  3. 応用63. CSSで要素をつくる疑似要素(:before, :after)

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

  1. 公開日:2017年03月06日
  2. 最終更新日:2022年08月10日

HTML・CSS

この記事をシェアする:

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対策として、重要なテキストを擬似要素で指定しない