記事内に商品プロモーションが含まれる場合があります
疑似要素の画像サイズは普通には変えられない
今回は少しマニアックな話です。疑似要素（beforeとafter）のcontent内で表示させた画像のサイズは:before{width:◯◯px}などと指定しても変えることはできません。
<p class="example">サンプル文</p>CSS
.example:before {
content: url(../img/face.png);
display: inline-block;
width: 5px;
height: 5px;
}
↑幅と高さの指定が効いていないのが分かるかと思います。
背景画像として表示させれば変更可能に
疑似要素内の画像のサイズは変えられないものの、疑似要素自体には幅と高さを指定することができます。これを活用して以下のように書けば画像サイズを自由に変えることができます。
<p class="example">サンプル文</p>CSS
.example:before {
content: '';/*何も入れない*/
display: inline-block;
width: 50px;/*画像の幅*/
height: 50px;/*画像の高さ*/
background-image: url(../img/face.png);
background-size: contain;
vertical-align: middle;
}
解説
上のコードを簡単に解説します。
content
画像だけ表示させたい場合には空にしましょう。
display
初期値のinlineでは、幅と高さを指定することができません。そのためblockかinline-blockを使います。要素と画像を横に並べたいときはinline-block、改行を入れたい場合はblockにしましょう。
background-image
ここに画像のパス（URL）を入れます。
background-size
containにすれば、画像の縦横比は維持したまま、疑似要素いっぱいに広がってくれます。つまり画像の大きさ＝疑似要素の大きさとなります。
vertical-align
display: inline-blockで要素と画像を横に並べたいときには、vertical-align: middleを指定しておくと綺麗に横に並びます。
【参考】背景画像をレスポンシブにする方法
ここからはちょっとしたテクニックの話です。上のコードでは背景画像としているため、width:100%のようにサイズをレスポンシブ（可変）にしたときにheightの指定の仕方に困ります。height: 100%とすると画像は表示されなくなってしまいます。そこでかなり荒業ですが、以下のようにするとレスポンシブにすることができます。
.example {
position: relative;/*相対配置*/
}
.example:before {/*スペースを作る*/
content: '';
top: 0;
left: 0;
width: 100%;/*指定したい幅*/
padding-top: 90%;/*画像の幅に対する高さ比率*/
display: block;
}
.example:after {/*画像を絶対配置*/
position: absolute;
content: '';
top: 0;
left:0;
display: block;
width: 100%;/*幅*/
height: 800px;/*どれだけデカくなってもはみ出ないであろう高さを指定*/
background-image: url(../img/face.png);
background-size: contain;
background-repeat: no-repeat;/*画像を繰り返さない*/
}
ものすごく複雑なことになってしまっていますが…。beforeとafterの2つの疑似要素を使います。
:before
beforeはただスペースを作るだけの役割をしています。padding-topには、画像の幅に対する高さの比率を指定します（画像の縦横比が10:5の場合⇒width:50%ならheightは25%に）。これで「%指定の幅×高さのスペース」が出来上がるわけです。
:after空いたスペースに画像を絶対配置（absolute）します。widthにはさきほどbeforeで指定した幅と同じ値を入れ、heightにはこれ以上画像が長くなることは無いだろうという値をpxで指定します。絶対配置なのでどれだけ高さを大きくしても、下に続く要素の位置には影響はありません。background-repeat: no-repeat;とすることで、画像が1度だけ表示されます。
かなり荒業なのでブラウザによっては問題が生じる可能性もあるかもしれません。もっとスマートな方法を見つけたら追記します。
