より良いリンクの下線の実装

前回、リンクには下線を付けようという記事を書いた。が、実際のところ、デフォルトのリンクのスタイルはあまりイケてないと思ってる。リンク色と同色の下線は視覚的な主張として強すぎるし、下線の位置が文字の下端に隣接し過ぎていて見づらい。

幸いにも、CSS Text Decoration Moduleにはあまり知られていない便利なプロパティがあり、この野暮ったさを解決できそうに見える。text-decoration-colorでは下線の色を指定できる。IE以外では実装されているので、プログレッシブエンハンスメントということにすれば問題無さそうだ。

a {
  color: hsl(240, 100%, 47%);
  text-decoration: underline;
  text-decoration-color: hsla(240, 100%, 47%, 0.5);
}

text-underline-positionを使えば下線の位置を変更できる。次の宣言によってテキストの下に下線を配置できる。このプロパティの値は継承されるので、html要素に指定しておくと良いだろう。

html {
  text-underline-position: under;
}

ただし、こちらはChromeにしか実装されていない。手軽にはできるので、一部のユーザーだけでもいい感じにしたいのであればこれを指定しておくと良いかもしれない。

これらはCSS Text Decoration Module Level 3の範囲だが、CSS Text Decoration Module Level 4を眺めてみるともう少し可能性が広がりそうだ。前述の内容に関連したところだと、text-underline-offsetは下線の位置を<length>型で指定できる。また、text-decoration-widthでは下線の幅を指定できる。下線を引くためにborderとかでがんばるのはあまりきれいじゃないと思っているので、この辺には期待したいところ。

現段階において独自の下線を実装するためには、やはりborderを使うのが一番簡単だ。もし、文字のアセンダーやディセンダーを下線が横切らないようにしたいということなら、text-decoration-skip-inkとか、text-shadowとlinear-gradient()を使ったハックがある。が、単に文字とぶつからないだけ下線の位置を下げるのが一番単純である。borderといっしょにpaddingを指定してやればいいだけだ。

a {
  padding-top: 2px;
  padding-bottom: 2px;
  color: hsl(240, 100%, 47%);
  text-decoration: none;
  border-bottom: 1px solid hsla(240, 100%, 47%, 0.5);
}

ターゲットサイズが下にだけ伸びしてまうのが気持ち悪いので、padding-bottomと同じサイズをpadding-topにも指定している。

見た目を調整してあげれば下線は取り除いてしまわなくても済みそうだ。

で、どうですか？