CSSの初心者が最初にbeforeやafterを見ると「?」となることでしょう。
最初は分かりづらいと思いますが、使えるようになるととても便利なのがbeforeとafterです。
今回はこの二つについて詳しく解説しようと思います。
初心者も絶対に覚えておきたいものなので、しっかり読んで使い方をマスターしておきましょう。
擬似要素のbefore、after
擬似要素というのは、要素の特定の場所を整形するためのものです。擬似要素という言葉の意味はそこまで気にしなくて良いです。
beforeとafterは「擬似要素」という言葉だけ覚えておけば大丈夫です。
.element::before {
content: "";
}
このような形で使われます。
CSS3ではコロン(:)二つをつけて、セレクタの後に記述します。コロン(:)一つでも大丈夫です。
IE8以前の古いブラウザでは、コロン(:)一つでないと認識されません。
.element:before {
content: "";
}
昔はコロン(:)一つだったのが二つになったのは、擬似クラスと区別するためです。擬似クラスとは以下のような記述です。
.element:first-child {
font-size: 14px;
}
コードを書く人にとって「擬似要素」なのか「擬似クラス」なのかはあまり気にする必要はありませんが、一応区別するためにコロンが二つになりました。
とはいえ、一つでも二つでも大丈夫です。
beforeの使い方
それでは、実際にどうやって使うかを解説します。
例えば、以下のようなHTMLがあったとします。
<p class="new">最新情報</p>
<p class="new">最新情報</p>
<p class="info">お得情報</p>
<p class="info">お得情報</p>
これにCSSで擬似要素を適用してみましょう。
.new::before {
content: "[new]";
}
擬似要素beforeは、contentプロパティとセットで使います。contentがないと何も表示されません。
contentには表示させたいテキストなどを記述します。
これは以下のように表示されます。
「before」の言葉通り、contentの内容が要素内の「前」に挿入されます。
beforeやafterの便利な所は、いちいち一つ一つ[new]と書かなくても、CSSでまとめて挿入することができることです。
先ほどのCSSにもう少し書き足してみます。
.new::before {
content: "[new]";
color: #FA5858;
}
.info::before {
content: "[info]";
color: #2E64FE;
}
以下のように表示されます。
afterの使い方
お次はafterの使い方です。挿入位置が違うだけで、beforeとほとんど同じです。
先ほどのHTMLを使って説明します。
<p class="new">最新情報</p>
<p class="new">最新情報</p>
<p class="info">お得情報</p>
<p class="info">お得情報</p>
ここにafterを適用していきます。
.new::after {
content: "[new]";
}
擬似要素afterも、contentプロパティとセットで使います。contentがないと何も表示されません。
contentには表示させたいテキストなどを記述します。
ブラウザには以下のように表示されます。
「after」の言葉通り、contentの内容が要素内の「後ろ」に挿入されます。
もう少しCSSの記述を増やしてみましょう。
.new::after {
content: "[new]";
color: #FA5858;
}
.info::after {
content: "[info]";
color: #2E64FE;
}
ブラウザには以下のように表示されます。
便利ですね。
Developer Toolsで確認してみよう
beforeやafterがHTMLのどの位置にあるのかは、Google ChromeのDeveloper Toolsで確認することができます。
擬似要素が適用されている要素の上で右クリック→「検証」を選択して下さい。
するとDeveloper Toolsが起動して、以下のように表示されます。
グレーの三角形をクリックすると、要素の中身がみれます。
beforeはこの位置に挿入されます。
afterはこの位置に表示されます。
まとめ
最初はちょっと分かりづらい擬似要素のbeforeとafterですが、使い方を覚えるとめちゃくちゃ便利です。
同じHTMLを何度も書く手間が省けるので時間短縮になり、後から修正するのも楽になります。
ぜひ使い方をマスターしましょう。
以下の記事もおすすめです。


コメントを残す