【CSS】疑似クラス(::before/::after)のアイコン画像サイズを変える方法

よく使うCSSなので備忘録として。

リストのアイコンを画像で置きたいときに便利！

元サイズが大きすぎるときに画像サイズをCSSで変更できるようにする方法です。

こんな感じで小さく設置できます⬇️

DEMO

この記事の内容は・・

background-image で設置
position: absolute; で位置調整

background-image で設置

content: url(../img/img.png) ;で画像を置くとサイズが変更できないので、

background-image: url(../img/img.png);のように背景画像として設置します。

.list{
  &::before{
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(../img/img.png);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 10px;
  }
}

position: absolute; で位置調整

リストアイコンの位置を微調整したときは、

同じように background-image: url(../img/img.png);で設置した後

position: absolute;で領域を浮かせて微調整しましょう。

親要素(アイコン画像を置きたいリスト)にposition: relative;を忘れずに！

.list{
  position: relative;
  &::after{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(../img/img.png);
    background-size: contain;
    background-repeat: no-repeat;
  }
}