疑似要素の画像サイズを変更する方法

疑似要素(beforeとafter)について…

画像のサイズを変更したいとき、以下のように背景画像として表示させれば変更可能に

疑似要素内の画像のサイズは変えられないものの、疑似要素自体には幅と高さを指定することができます。これを活用して以下のように書けば画像サイズを自由に変えることができます。

サンプル文

.example:before {
content: ”;/*何も入れない*/
display: inline-block;/*忘れずに!*/
width: 50px;/*画像の幅*/
height: 50px;/*画像の高さ*/
background-image: url(../img/face.png);
background-size: contain;
vertical-align: middle;
}

【CSS】疑似要素の画像サイズを変更する方法

サブコンテンツ

このページの先頭へ