擬似要素で指定した画像の大きさを変更する

beforeやafterの擬似要素に画像を表示することはできるが、大きさを変更するところでつまづいたのでメモ。

元々の画像の大きさよりも小さくしたりする場合は、ただ幅や高さを指定するだけでは不十分。

a.btn {
  width: 200px;
  padding: 15px 20px;
  margin: 0 auto 10px auto;
  display: block;
  color: #fff;
  background: #000;
  text-decoration: none;
  &:after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: -3px 0 0 10px;
    background: url("画像URL") no-repeat;
    background-size: contain;
    vertical-align: middle;
  }
  &:hover {
    background: #999;
  }
}