【コピペでOK】サイズ変更できる擬似クラスの記述

擬似クラスのcontentに直接画像を設定してしまうとサイズ変更が出来ない為、不便ですよね。

そこで、擬似クラスの背景として画像を入れることでbackground-sizeでサイズ変更を出来るようにします。

そうすることでレスポンシブデザインにも柔軟に対応できます。

↓をコピペでwidth、height、background-imageの指定を変えるだけでOK。
(場合によっては場所指定も変えてくださいね)

a:before {
 content: '';
 display: inline-block;
 width: 00000px;
 height: 00000px;
 background-image: url(../img/img.png);
 background-size: contain;
 vertical-align: middle;
 position: absolute;
 left: 0;
 top: 0;
 background-repeat: no-repeat;
}

うぇぶやき

WEBデザイナーのぼやき、略して「うぇぶやき」です。