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 {
  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つの構文のみ。

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 あり
完全対応 あり
完全対応 あり
代替名
代替名 非標準の名前 :before を使用しています。
Edge 完全対応 あり
完全対応 あり
完全対応 あり
代替名
代替名 非標準の名前 :before を使用しています。
Firefox 完全対応 1.5
補足
完全対応 1.5
補足
補足 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.
補足 Before Firefox 3.5, only the CSS level 2 behavior of :before was supported, which disallowed position, float, list-style-* and some display properties.
完全対応 1
代替名
代替名 非標準の名前 :before を使用しています。
IE 完全対応 9
完全対応 9
完全対応 8
代替名
代替名 非標準の名前 :before を使用しています。
Opera 完全対応 7
完全対応 7
完全対応 4
代替名
代替名 非標準の名前 :before を使用しています。
Safari 完全対応 4
完全対応 4
完全対応 4
代替名
代替名 非標準の名前 :before を使用しています。
WebView Android 完全対応 あり
完全対応 あり
完全対応 あり
代替名
代替名 非標準の名前 :before を使用しています。
Chrome Android 完全対応 あり
完全対応 あり
完全対応 あり
代替名
代替名 非標準の名前 :before を使用しています。
Edge Mobile 完全対応 あり
完全対応 あり
完全対応 あり
代替名
代替名 非標準の名前 :before を使用しています。
Firefox Android 完全対応 あり
完全対応 あり
完全対応 あり
代替名
代替名 非標準の名前 :before を使用しています。
Opera Android ? Safari iOS 完全対応 5.1Samsung Internet Android 完全対応 あり
Animation and transition supportChrome 完全対応 26Edge 完全対応 ありFirefox 完全対応 4IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
非標準の名前を使用しています。
非標準の名前を使用しています。

関連情報

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

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