Corredor

ウェブ、プログラミングの勉強メモ。

Chrome 64 からリンクの下線が途切れる:text-decoration-skip-ink プロパティについて

CSSシークレット ―47のテクニックでCSSを自在に操る

CSSシークレット ―47のテクニックでCSSを自在に操る

Chrome 64 から、リンクの下線の一部が途切れていることに気付いた。

ちょうどこの記事が言っているとおりだった。text-decoration-skip-ink という CSS プロパティに対応するようになったようだ。

実際にサンプルを置いてみた。今のところ Chrome ぐらいしか対応していないようなので、Chrome で見てみてほしい。

See the Pen text-decoration-skip-ink by Neos21 (@Neos21) on CodePen.

このプロパティに auto を指定すると、text-decoration: underline の下線に文字が被らないようになる。文字の視認性は良くなるかもしれないが、リンクっぽさがなくなって見づらい気がする。

一方、これまでのように文字に下線が被る見た目は、text-decoration-skip-ink: none と指定すれば直せる

…ブラウザのデフォルトスタイルを直してくれないかな…。