#37 疑似要素の画像サイズ変えたい- 【ぴよぴよコーダーの開発日記】

毎回毎回ググって、学習してないのでここにメモを残す。下記のような指定の画像は、widthとheightが効かない。

.hoge::after {
 content: url(../img/hoge.png);
}

対応策としては、content属性に指定しないで、backgroundで指定して、widthとheightを指定する。 デモ

.hoge::after {
   content:'';
   display: inline-block;
   width: 100%;
   height: 100%;
   max-width: 250px;
   max-height: 250px;
   background: url(../img/hoge.png) no-repeat;
   background-size: contain;
}

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