疑似要素に画像を入れてサイズを変更する方法

<p class="text">〇〇</p>

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