CSS:文字の大きさが違う要素に下線をつける


公開日:2020.4.14
Pocket

ひとつの文章の中で文字の大きさを変えたい場合、基本的にspanタグで囲うと思います。

そして、その文章がリンクだったら、下線をつけたいですよね。

はいはい text-decoration: underline; ね、ってすぐひらめくと思うんですが、実際にやってみると

なんか思った感じと違うね??? by Chrome

 

SafariとFirefoxでは線の太さが変えられる

私的に、こればっかりはどうしようもないかもと思って調べてみたんですが、どうやらsafariとFirefoxではtext-decorationの線の太さが変えられるプロパティが実装されているらしい。

text-decoration-thickness というプロパティ。

早速使ってみましょう。

 

chromeで見た図

Firefoxで見た図

 

おーーー

Firefoxは太さ5pxが反映されている

ちなみにfirefoxは、何もしない状態でも普通に下線は1pxで表示されるみたい(文字の大きさ関係なく)

普段chromeばっかり見てるから気づかなかったね・・・・!

 

代替案

とはいえchromeユーザーは多いはずなので、こういう場合はborder-bottomとかで近しい見た目にしておくのが良いのかなーと思います。

IEやEdgeはともかく、Chromeが対応外っていうのはちょっと珍しくて新鮮でした。

Pocket