::before (:before)

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 で整形したものです。先に進んでやってみてください。

結果

仕様書

仕様書 状態 備考
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 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
::beforeChrome 完全対応 1
完全対応 1
完全対応 1
代替名
代替名 非標準の名前 :before を使用しています。
Edge 完全対応 12
完全対応 12
完全対応 12
代替名
代替名 非標準の名前 :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 完全対応 ≤37
完全対応 ≤37
完全対応 ≤37
代替名
代替名 非標準の名前 :before を使用しています。
Chrome Android 完全対応 18
完全対応 18
完全対応 18
代替名
代替名 非標準の名前 :before を使用しています。
Firefox Android 完全対応 4
補足
完全対応 4
補足
補足 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.
完全対応 4
代替名
代替名 非標準の名前 :before を使用しています。
Opera Android 完全対応 10.1
完全対応 10.1
完全対応 10.1
代替名
代替名 非標準の名前 :before を使用しています。
Safari iOS 完全対応 5.1Samsung Internet Android 完全対応 1.0
完全対応 1.0
完全対応 1.0
代替名
代替名 非標準の名前 :before を使用しています。
Animation and transition supportChrome 完全対応 26Edge 完全対応 12Firefox 完全対応 4IE 未対応 なしOpera 完全対応 15Safari 未対応 なしWebView Android 完全対応 ≤37Chrome Android 完全対応 26Firefox Android 完全対応 4Opera Android 完全対応 14Safari iOS 未対応 なしSamsung Internet Android 完全対応 1.5

凡例

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

関連情報