text-decorationで下線の太さは調整できる？

CSSのtext-decorationプロパティはテキストに対して下線や上線などの線による装飾を施すことができるプロパティです。

text-decorationプロパティの構文や使い方を知りたい方は下記を参考にしましょう。

さて、text-decorationでは装飾した線の種類（点線や破線など）や色、太さを一括設定できますが、ここで太さを設定するtext-decoration-thicknessプロパティが問題になります。

text-decoration-thicknessプロパティはFirefoxやSafariのブラウザでは対応していますが（2020年11月17日現在）、ChromeやEdgeなど主要なブラウザで非対応となっており実践では使いづらいプロパティとなっています。

それでもtext-decoration-thicknessを使いたいという方は下記を参考にして使い方を調べてみましょう。

text-decorationの太さが主要なブラウザで調整が出来ない現状ではtext-decorationの代わりにborderで下線を引くようにしましょう。

下記のサンプルコードではtext-decoration: noneで下線の装飾を消し、代わりにborderで下線を引き、その太さをborder-widthプロパティで調整しています。