
擬似要素のbefore
について紹介します。
使いどころがイメージ湧かない人もいると思いますが、仕事ではちょくちょく指定します。
ワードプレスとかでサイト制作してると使う場面があるんです。
具体的に説明すると…長くなるので、割愛。
そんなわけで、さっそく指定していきます。
※afterも同じようにできます。
beforeの指定方法
before
は、以下のように指定します。
<p>ほぼほぼ</p>
p::before {
content:'new';
}
ほぼほぼ
p:before
と書く時、「p」と「::」。
それと「::」と「before」の間にはスペースが入らないようにしましょう。
指定が効かなくなる↓
- p ::
- :: before
次はcontent: 'new'
の部分。
content:
として、’ ‘とクオーテーションをつけて、その中に文字を入力します。
” “ダブルクオーテーションでもオッケー
- content: ‘new’
- content: “new”
※クオーテーションマーク…引用符という意味。引用や発言の時に用いるみたいです。日本語なら「 」になります。
これは大丈夫だと思います。
beforeは要素幅のどこに入ってくるのか?
※要素とは<div>や<p>などのことです。
じゃあ、before
を指定せず、<p>に背景色をつけてみます。
<p>ほぼほぼ</p>
p {
background-color:: aliceblue; /* うすいブルー */
}
ほぼほぼ
何をするのかというと、<p>の幅のどこにnewが入り込んでくるかを確認します。

というわけで、結果を見てみましょう。
<p>ほぼほぼ</p>
p {
background-color:: aliceblue; /* うすいブルー */
p::before {
content: 'new';
}
newほぼほぼ
<p>の幅の中に入ってきてますね、newが。
たったこれだけを確認したかったんです…
beforeはインライン要素
ちなみにbefore
はインライン要素です。
これは、display
の初期値がinline
だからです。
※初期値…要素にプロパティを指定してない時に、はじめから与えられている値。


【参考記事】
初期値の使い所を理解する
ブロック要素とインライン要素の違い|できることできないこと
幅や高さを指定しても反映されない時は、block
やinline-block
に変換しましょう。
次は画像を表示させます。
画像を指定する
before
では画像も指定できます。
画像の元サイズは、幅100px・高さ100px・縦横比1:1です。
この値を覚えておいてくださいね。
もう1度…、幅100px・高さ100pxです。
画像はcontent
に指定できます。
<p>ほぼほぼ</p>
p::before {
content: url(images/cry.jpg);
}
ほぼほぼ
そのままの大きさで表示されますね。
注意したいのは、クオテーションマークで囲まないことですね。
これだと指定が効かなくなります↓
p::before {
content: 'url(images/cry.jpg)';
}
クオテーションマークは、文字の時だけに使います。
※上記は相対パスで指定しています。相対パスの場合は、cssファイルから見た時の画像の位置になります。
上の場合、例えばcssファイルをtest.cssとしますね。
そのtest.cssから見て、cry.jpgの画像はimagsフォルダの中にあります。

で、幅と高さを調整してみましょう。
<p>ほぼほぼ</p>
p::before {
content: url(images/cry.jpg);
width: 50px;
height: 50px;
}
ほぼほぼ
結果、画像の大きさは変わらず。
ちなみに、<img>だとインライン用そのまま幅・高さを指定できます。
なので、この画像の場合もそうできるんじゃないかと思い、display: block
やinline-block
に変換しませんでした。
検証画面だと↓のように表示。

幅は100px、高さは16pxとなっています。
この16pxは文字の大きさと同じですね。
次に、display: inline-block
と変換した結果もどうぞ。
<p>ほぼほぼ</p>
p::before {
content: url(images/cry.jpg);
width: 50px;
height: 50px;
display: inline-block;
}
ほぼほぼ
画像の大きさはやはり変わらず。
「ほぼほぼ」が画像に被りましたね。
これは、before
に指定した幅と高さが効いているからです。
と説明しても分かりにくいはずなので、検証画面の要素をどうぞ↓

幅と高さは効いてるのに、画像の大きさがそのままってのが何とも不思議ですね。
ちなみに、なぜこのようになるのか調べたのですが、分かりませんでした。
そして、もう1個ちなみにですが、テキストの場合だとfont-size
で文字の大きさを変えれます。
<p>ほぼほぼ</p>
p::before {
content:'new';
font-size: 30px;
}
ほぼほぼ
おっきくなりましたね。
画像のサイズを調整するなら背景画像で指定する
画像サイズを調整したいなら背景として画像を指定しましょう。
content
は中身はないのですが、content: ''
としてください。
content: ''
がないとbefore
自体の指定が効かなくなります。
<p>ほぼほぼ</p>
p::before {
content: '';
width: 50px;
height: 50px;
display: inline-block;
background-image: url(images/cry.jpg);
background-size: 100% 100%; /* 指定した幅50px 高さ50pxに対する割合 */
}
ほぼほぼ
※画像指定の相対パスは、先ほどと同じくtest.cssファイルから見た時の画像の位置になります。

無事、小さくなりましたね。

というわけで、突然の終わり。
参考サイト
この記事の内容は「CSS3」をもとに紹介しました。
「CSS3」はcssのルールブックみたいなもので、その最新版です。
どちらも翻訳あります。
まとめ
beforeはなかなかおもしろい挙動をします。
みなさんもいろいろ試しながらやってみてください。