CSS における ::before は、選択した要素の最初の子要素として擬似要素を作成します。よく content プロパティを使用して、要素に装飾的な内容を追加するために用いられます。この要素は既定でインラインです。

/* リンクの前にハートを追加 */
a::before {
  content: "";
}

注: ::before および ::after によって作成される疑似要素は要素の整形ボックスに含まれるため<img> 要素や <br> 要素のような置換要素には適用されません。

構文

/* CSS3 syntax */
::before

/* CSS2 syntax */
:before

注: CSS3 では疑似クラス疑似要素を見分けやすくするために、 ::before の表記法(二重コロン付き)が導入されました。ブラウザーでは CSS2 で導入された :before も使用できます。

引用符の追加

::before 疑似要素を使用するシンプルな例の1つ目は、引用符を追加するものです。引用符を挿入するために ::before および ::after の両方を使用しています。

HTML

<q>引用があることは、</q>彼は言った、<q>ないよりも良い。</q>

CSS

q::before { 
  content: "«";
  color: blue;
}

q::after { 
  content: "»";
  color: red;
}

結果

装飾の例

content プロパティ内の文字列や画像は、大体思う通りに整形することができます。

HTML

<span class="ribbon">オレンジのボックスがどこにあるか注意してください。</span>

CSS

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

.ribbon::before {
  content: "このオレンジのボックスを見てください。";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

結果

やることリスト

この例では、疑似要素を使用して簡単なやることリストを作成します。この方法は UI に小さな変更を加え、使い勝手を改善するためによく使われます。

HTML

<ul>
  <li>牛乳を買う</li>
  <li>犬の散歩をする</li>
  <li>エクササイズ</li>
  <li>コードを書く</li>
  <li>音楽を演奏する</li>
  <li>リラックスする</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 で整形したものです。先に進んでやってみてください。

結果

メモ

Firefox 3.5では、位置指定を修正しても、コンテンツが直前の別な兄弟要素として生成されることはありませんが(CSS 仕様書によれば、「:before と :after 擬似要素は他のボックスとやりとりします。(中略)実際の要素のように関連する要素のすぐ内側に挿入されます。」)、これらの要素を使用すると、テーブルを使わないレイアウト(例えば中央への配置の実現など)に若干の改善をすることができます。中央に配置されるコンテンツが別の子要素に含まれている限り、前後に兄弟要素を追加せずにコンテンツの前後に列を挿入することができます(つまり、前後に空の <div/> を追加するより、以下のように span を追加したほうがおそらく意味的により正しいです)。 (そして、常に float に width を設定することを忘れずに。さもないと float になりません。)

HTML

<div class="example">
<span id="floatme">「前のフロート」は描画範囲の左側に生成され、この行があふれても
その下に流れ込むことはありません。同様に「後のフロート」は描画範囲の右側に現れ、
この行がその下に流れ込むことはありません。</span>
</div>

CSS

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

/* 空の列にするために、改行しない空白文字を \a0 の16進コードで示します。(他の文字セットではそのような空白文字に \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
::before の定義
草案 前回の版から重要な変更はなし。
CSS Transitions 草案 擬似要素で定義されたプロパティのトランジションを許可。
CSS Animations 草案 擬似要素で定義されたプロパティのアニメーションを許可。
Selectors Level 3
::before の定義
勧告 2重コロンの構文を導入。
CSS Level 2 (Revision 1)
::before の定義
勧告 初回定義。コロン1つの構文のみ。

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本サポート

有り

有り1

有り

有り1

1.52 3

11

9

81

7

41

4

41

Animation and transition support26 有り4 無し 無し 無し
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本サポート

有り

有り1

有り

有り1

有り

有り1

有り

有り1

?5.1 ?
Animation and transition support 有り 有り 有り4 無し 無し ?

1. Supported as :before.

2. Before Firefox 57, Firefox had a bug where ::before pseudo-elements were still generated, even if the content property value were set to normal or none.

3. Before Firefox 3.5, only the CSS level 2 behavior of :before was supported, which disallowed position, float, list-style-* and some display properties.

関連情報

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

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