firefoxで:beforeが効かない(css) - カメ飼ってる新米エンジニアの覚書き

chromeだと:beforeの擬似要素が表示されるのに、firefoxだと表示されない現象に悩まされたのでメモ。

原因はinputに:beforeが書いてあったせい。

<input type="radio icon" />ラジオボタン

.icon::before {
  content: "#";
}

ラジオボタンなんかで、装飾をするのにiconフォントなんか使いがちだけど、

<label>
<input type="radio" />
<i class="icon icon-radio"></i>
<p>ラジオボタン</p>
</label>

みたいに、iconフォントでは一般的な記述(?大体サンプルで載ってるやつ)で擬似要素を分けるか、<label>か<p>に擬似要素のクラスをつけてしまうのが無難そう。

他にも擬似要素に対応していないタグがあるって調べたら出てきました。

先人で詳しく調べられている方々を参考に

chromeで表示されてるのにってとこでソース比較したり何やりして結構時間使ったので、戒めにこちらに記載して残します。