[CSS]Firefoxでfirst-letterが効かないケース

before疑似要素があるとfirst-letterがわからない

Firefoxは謎動作が多いのでIEの次くらいに消えろと思ってるブラウザなんですが、1文字目だけ修飾するCSSの「first-letter」の判断にも独自動作があることに気付いてなかったので備忘録。

— 見出し —

こういう左右に棒を出して1文字目の色を変える見出しを作ってたんですが、棒をbeforeとafter疑似要素で作ったらFirefoxではfirst-letterを認識できませんでした。beforeが原因。

対処法

どうしようもないのでとりあえずemタグで1文字目を括って解決しました。（emタグは強調の意）
今回はフロントページのみのスタイルだったのでごまかしみたいな感じで済ませましたが、サイト全体で頻出する見出しに対してはこういったスタイルは用いないほうが良いかも。。

ちなみに

ソース汚いけどh2に介入せず棒はつけるみたいな感じでもOKかな…
棒・h2はinline-block、棒をposition:relativeで位置調整。左右間隔はh2のpadding。

<div class="title_area">
 <span class="bar"></span>
 <h2>COMPANY</h2>
 <span class="bar"></span>
</div>