::before (:before)

概要

::before はマッチした要素の最初の子要素となる擬似要素を生成します。content プロパティを使って、装飾的なコンテンツを要素に追加するのによく使われます。この要素はデフォルトではインラインです。

構文

/* CSS3 構文 */
element::before { style properties }

/* CSS2 の obsolete な構文(IE8をサポートするためだけに必要) */
element:before  { style properties }

/* 全ての <p> 要素の前にコンテンツを挿入 */
p::before { content: "Hello world!"; }

::before(コロンが2つ)の記法は、擬似クラス擬似要素の見分けをはっきりさせるために、CSS3 で導入されました。CSS2 で導入された :before の記法も、多くのブラウザで使えます。

引用符の追加

::before 擬似要素を使った一つの単純な例は、引用符を付けることです。ここでは ::before::after の両方を使って引用符を挿入しています。

HTML の内容

<q>Some quotes</q>, he said, <q>are better than none</q>.

CSS の内容

q::before { 
  content: "«";
  color: blue;
}
q::after { 
  content: "»";
  color: red;
}

出力

装飾的な例

content プロパティのテキストや画像は、ほとんど好きなように装飾することができます。

HTML の内容

<span class="ribbon">Notice where the orange box is.</span>

CSS の内容

.ribbon {
  background-color: #5BC8F7;
}

.ribbon::before {
  content: "Look at this orange box.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

出力

To-do リスト

この例では、擬似要素を使って簡単な to-do リストを作成します。この手法は UI に少し手を加えてユーザーエクスペリエンスを改善するのによく使われます。

HTML の内容

<ul>
  <li>Buy milk</li>
  <li>Take the dog for a walk</li>
  <li>Exercise</li>
  <li>Write code</li>
  <li>Play music</li>
  <li>Relax</li>
</ul>

CSS の内容

li {
  list-style-type: none;
  position: relative;
  margin: 2px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: lightgrey;
  font-family: sans-serif;
}

li.done {
  background: #CCFF99;
}

li.done::before {
  content: '';
  position: absolute;
  border-color: #009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;
}

JavaScript の内容

var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if( ev.target.tagName === 'LI') {
     ev.target.classList.toggle('done'); 
  }
}, false);

これが上記のコードの実際に動く例です。ここではアイコンは使われておらず、チェックマークは実は CSS で装飾された ::before である点に注意してください。さぁ、いくつか to-do を完了させてみましょう。

出力

補足

Firefox 3.5 の変更では、コンテンツを別の兄弟要素として前に生成することはできませんが(※1)、テーブルなしのレイアウトのちょっとした改善、例えば中央寄せに使えます。中央寄せしたいコンテンツがもともと、さらに別の要素に包まれているのなら、前後に兄弟要素を追加することなく、列を挿入できます(※2)。(※3)

(※1)CSS 仕様書で ":before と :after 擬似要素は他のボックスと相互作用します。ちょうど、結び付けられた要素のすぐ内側に挿入された、本当の要素であるかのように" と示されるとおり

(※2) したがって、空の <div/> を前後に追加するより、以下のように span を追加するほうが、意味的におそらくより正しくなります

(※3) フロートには常に width を与えることを忘れぬよう。さもないとフロートしないでしょう!

HTML の内容

<div class="example">
<span id="floatme">前にフロート" がビューポートの左側に生成されますが、この行があふれて下に流れることはできないはずです。同様に "後ろにフロート" がビューポートの右側に現れますが、この行がその下に流れることはできないでしょう。</span>
</div>

CSS の内容

#floatme { float: left; width: 50%; }

/* 空の列を作るには、ノンブレークスペース (NBSP) を表す16進コードを使うだけです: content を \a0 にします(スペースのあとに他の文字を続けるなら \0000a0 を使ってください) */
.example::before {
  content: "前にフロート";
  float: left;
  width: 25%
}
.example::after {
  content: "後ろにフロート";
  float: right;
  width:25%
}

/* For styling */
.example::before, .example::after, .first {
  background: yellow;
  color: red;
}

出力

仕様書

仕様書 策定状況 コメント
CSS Pseudo-Elements Level 4
The definition of '::before' in that specification.
草案 有意な変更点は無し
CSS Transitions 草案 擬似要素で定義されたプロパティでトランジションを許可
CSS Animations 草案 擬似要素で定義されたプロパティでアニメーションを許可
Selectors Level 3
The definition of '::before' in that specification.
勧告 2つのコロンを使った構文を導入
CSS Level 2 (Revision 1)
The definition of '::before' in that specification.
勧告 初回定義、1つのコロンを使った構文

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
:before のサポート (有) 1.0 (1.7 or earlier)[1] 8.0 4 4.0
::before のサポート (有) 1.5 (1.8)[1] 9.0 7 4.0
アニメーションとトランジションのサポート 26 4.0 (2.0) 未サポート 未サポート 未サポート
機能 Android Chrome Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
:before のサポート (有) (有) (有) ? ? ?
::before のサポート (有) (有) (有) 7.1 ? 5.1
アニメーションとトランジションのサポート 26 (有) 4.0 (4.0) 未サポート 未サポート 未サポート

バージョン 3.5 以前の Firefox は CSS 2.0 バージョンの :before のみを実装していました。positionfloatlist-style-* と、いくつかの display プロパティは許可されていませんでした。Firefox 3.5 でこれらの制限は取り払われました。

参照

ドキュメントのタグと貢献者

 このページの貢献者: mitsuba-clover, ethertank, sosleepy
 最終更新者: mitsuba-clover,