:beforeなどの疑似要素の画像の拡縮

:beforeや:afterなどの疑似要素に、画像を使いたい場合、レスポンシブの画像拡縮が効かない問題。
その場合の対処は画像を背景画像扱いにすること。

.example:before {
  content: '';/*何も入れない*/
  display: inline-block;/*忘れずに！*/
  width: 50px;/*画像の幅*/
  height: 50px;/*画像の高さ*/
  background-image: url(../img/face.png);
  background-size: contain;
  vertical-align: middle;
}