テキストの左にアイコン

::before の使い方

中央揃えや右揃えにしたテキストの左に画像などのアイコンを入れたい場合、backgroundではテキストについてこない。

この場合は ::beforeを使う。

以下のCSSでOK！（セレクタはブロックレベル）

   セレクタ {
      text-align: right;
    }
    セレクタ::before {
      content: url(mama-icon.png);
      vertical-align: middle;
    }

インライン要素のbeforeの場合は１行なら上でOK
複数行の場合はブロックレベルに変更しないと上下中央にできない