Chromeでtext-decoration-thicknessが使えるようになるまでの身代わりコードを考えた

解決フロー

1. Chromeではtext-decoration-thicknessがまだ対応できない
2. border-bottomとか似たようなことができる他のコードを試す
3. border-bottomだとテキストの箇所だけではなく、h1要素全てに下線が引かれてしまう
4. 3の状態になるのはh1タグがブロックレベル要素だから
5. h1タグをインライン要素にして、border-bottomを使用してみる
6. 解決

発生した問題

h1タグに太さを調整できる下線を引きたいのに、text-decoration-thicknessがChromeでは対応していなかった

style.css

h1{
  text-decoration: underline;
  text-decoration-color: red;
  text-decoration-thickness: 4px; <-chrome未対応(2020/04/10時点)
}

試したこと

調べてみたら、CSSには他にも下線を引けるコードがあると判明。
border-bottomとか。
「これで良いじゃん!」と思って試してみたらこれで良くなかった。

style.css

h1{
  border-bottom: 4px solid red;
}

h1要素全体に下線が引かれてしまっているのが問題。
テキスト部だけで良いのに。

border-bottomでの問題

テキスト部以外にも下線が引かれてしまう理由は、h1タグはページ構成の中で一つの塊として扱われるブロックレベル要素だから。
だから、border-bottomは「h1タグのテキスト」ではなく、「h1タグ」を対象として動いている。
border-bottomを使って、テキスト部だけに下線を引きたいならその対象を「h1タグのテキスト」にしてあげればいい。

解決法

h1タグにdisplay: inline-blockを与えて、インライン要素にしてborder-bottomを使用する。

style.css

h1{
  display: inline-block;
  border-bottom: 4px solid red;
}

解決!!

感想

正直、text-decoration系よりもborder-bottom系の方がサポートというか色々な属性?があるからそっちを使った方が良いのでは?
まぁ今回はborder-bottomを使うときはdisplay: inline-blockを使うと、より多様な使い方ができると分かったということで。

参考資料

text-decoration-thickness
ブロックレベル要素とインライン要素
HTMLやCSSで【アンダーライン】を引くベストな方法ってどれ？比較してみました。