解決フロー
Chromeではtext-decoration-thicknessがまだ対応できないborder-bottomとか似たようなことができる他のコードを試すborder-bottomだとテキストの箇所だけではなく、h1要素全てに下線が引かれてしまう- 3の状態になるのは
h1タグがブロックレベル要素だから - h1タグをインライン要素にして、
border-bottomを使用してみる - 解決
発生した問題
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:4pxsolidred;}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:4pxsolidred;}
解決!!
感想
正直、text-decoration系よりもborder-bottom系の方がサポートというか色々な属性?があるからそっちを使った方が良いのでは?
まぁ今回はborder-bottomを使うときはdisplay: inline-blockを使うと、より多様な使い方ができると分かったということで。
参考資料
text-decoration-thickness
ブロックレベル要素とインライン要素
HTMLやCSSで【アンダーライン】を引くベストな方法ってどれ？比較してみました。