読者です 読者をやめる 読者になる 読者になる

カメ飼ってる新米エンジニアの覚書き

とにかくカメがかわいい

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>に擬似要素のクラスをつけてしまうのが無難そう。

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

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

imgとかinputなどの置換要素にはbefore, afterは使えないよ - しるてく

textareaとinputの擬似要素

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