2013/11/13

【CSS】知らなきゃまずい!?擬似要素「:before」「:after」の使い方の基本

【CSS】知らなきゃまずい!?擬似要素「:before」「:after」の使い方の基本

CSS2で定義された、:before擬似要素と:after擬似要素の基本的な使い方についてご紹介します。
※IE7以下では非対応なのでご注意下さい。

目次

対応ブラウザ

Chrome
Firefox
Safari
Opera
IE6 ×
IE7 ×
IE8+

「:before」「:after」とは

:before擬似要素と:after擬似要素は、指定した要素の前後にエレメントを追加することができる擬似要素です。
HTMLに余計なマークアップをしたくない時に役立ちます。

書式

要素名:before {
  プロパティ: 値;
}
要素名:after {
  プロパティ: 値;
}

適用対象

:before 要素の直前
:after 要素の直後

「:before」「:after」の使い方

それでは基本的な使い方についてご紹介します。

追加する内容はcontentプロパティで指定します。

【HTML】

<ul>
  <li>サンプル1</li>
  <li class="sample1">サンプル2</li>
  <li class="sample2">サンプル3</li>
</ul>

【CSS】

li {
  list-style: none;
}
li.sample1:before {
  content: "※";
  color: red;
}
li.sample2:after {
  content: "NEW";
  color: red;
  font-size: 80%;
  padding: 2px 5px;
  margin-left: 5px;
  border: solid 1px #ff0000;
}

【ブラウザの表示】

sample1クラスのついた<li>の直前に「」を挿入し、sample2クラスのついた<li>の直後に「NEW」を表示するように指定しています。

このように、HTMLを汚すことなくエレメントを追加することができます。

contentプロパティが空の場合でも必ず記述して下さい。
contentプロパティは必要条件で、記述がないと動作しないので注意が必要です。

<blockquote>タグをカスタマイズしてみる

引用文であることを示す<blockquote>タグのデザインは様々なパターンがありますが、今回は比較的よく見られるダブルクォーテーションを用いたデザインの作り方をご紹介します。

【HTML】

<blockquote>
  <p>
  引用テキストが入ります。引用テキストが入ります。引用テキストが入ります。引用テキストが入ります。引用テキストが入ります。引用テキストが入ります。
  </p>
</blockquote>

【CSS】

blockquote {
	width: 400px;
}
blockquote p {
	margin: -20px 20px;
}
blockquote:before {
	content: open-quote;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24pt;
	color: #ccc;
	text-align: left;
	display: block;
}
blockquote:after {
	content: close-quote;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24pt;
	color: #ccc;
	text-align: right;
	display: block;
}

【ブラウザの表示】

IE7への対処方法

jQuery Pseudo Pluginを使えばIE7で:before擬似要素と:after擬似要素を使えるようになります。

http://jquery.lukelutman.com/plugins/pseudo/

まとめ

擬似要素を使いこなせば、画像を使わずにおしゃれな表現ができるようになります。
:before擬似要素 :after擬似要素を使った応用テクニックは次回以降にご紹介したいと思います。