擬似要素で設定した画像の大きさを変える方法

CSS

2023.09.11

記事内に広告が含まれています。

擬似要素（::after、::before）で設定した画像の大きさを変えたいときの方法を紹介します

画像をbackgroundに設定する

本来画像を設定するには、contentで指定しますが、画像をbackgroundで設定します。

h2::before {
content:url(images/***.png);
}

上記を

h2::before {
background:url(images/***.png);
background-size:50%;
}

などで設定してあげると、背景画像としてbackground-sizeでサイズを変更することができます。

何らかの理由でbackgroundに画像を設定するやり方が使えないときには、transform:scale( )で対応できます。

scale( )のカッコの中を割合にします。

等倍が１となりますので、縮小したいときは少数で、拡大は1以上の数値を入力してあげます。

h2::before {
content:url(images/***.png);
}

こちらに

h2::before {
content:url(images/***.png);
transform:scale(0.5); /* 0.5倍に縮小 */
transform:scale(1.5); /* 1.5倍に拡大 */

こうしてあげるとcontentで設定した画像も大きさ変更が可能になります。

WEBスキルをレベルアップさせて、収入アップを目指したいなら、WEBスクールがオススメ。

スキルアップして、自分の価値をあげていきましょう