::before (:before)
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
CSS において ::before
は、選択した要素の最初の子要素として擬似要素を生成します。よく content
プロパティを使用して、要素に装飾的な内容を追加するために用いられます。この要素は既定でインラインです。
/* リンクの前にハートを追加 */
a::before {
content: "♥";
}
試してみましょう
メモ: ::before
および ::after
によって作成される擬似要素は要素の整形ボックスに含まれるため、 <img>
や <br>
のような置換要素には適用されません。
構文
例
引用符の追加
::before
擬似要素を使用するシンプルな例の一つとして、引用符を追加します。引用符を挿入するために ::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 であり HTML ではないので、 content の値の中でエンティティのマークアップを使用することはできません。特殊文字を使用する必要がある場合で、 CSS の content の文字列に直接入力できない場合は、バックスラッシュの後に 16 進数の Unicode 値を続ける Unicode エスケープシーケンスを使用してください。
HTML
<ol>
<li>Crack Eggs into bowl</li>
<li>Add Milk</li>
<li>Add Flour</li>
<li aria-current="step">Mix thoroughly into a smooth batter</li>
<li>Pour a ladleful of batter onto a hot, greased, flat frying pan</li>
<li>Fry until the top of the pancake loses its gloss</li>
<li>Flip it over and fry for a couple more minutes</li>
<li>serve with your favorite topping</li>
</ol>
CSS
li {
padding: 0.5em;
}
li[aria-current="step"] {
font-weight: bold;
}
li[aria-current="step"]::after {
content: " \21E6"; /* 左向きの白い矢印を表す Unicode の 16 進数 */
display: inline;
}
結果
アクセシビリティの考慮
::before
擬似要素を使用してコンテンツを追加することは、スクリーンリーダーからアクセスできなくなる可能性があるため推奨されません。
仕様書
Specification |
---|
CSS Pseudo-Elements Module Level 4 # generated-content |
ブラウザーの互換性
BCD tables only load in the browser