【CSS】aタグのテキストhoverデザイン

Styling Underlines on the Web

より。

a:hoverって、通常text-decoration: underline; とかやるけど、フォントサイズによって下線の太さも太くなる。。
特に見出しにアンカーがある場合はそれなりに太くなる。

普段全く気にしてなかったけど、お客さんからの要望で…

下線が現在太く、圧が強めのため、細くしたい

というのがあった。
border-bottomでいいかな？と最初は思ってborder-bottom: 1px solid #color;にしてたんだけど、テキストと、borderとの隙間がtext-decoration: underline;より空いてしまって気になった。。

なんか上手いやり方ないかなーってググってたら発見
↑↑のリンク先の”#box-shadow”がしっくりきた。

%hover_line_thin {
  color: #ff6600;
  text-decoration: none;
  text-shadow:
          -2px -2px white,
          -2px 2px white,
          2px -2px white,
          2px 2px white;
  background-size: 1px 1em;
  display: inline;
  box-shadow:
          inset 0 -0.075em white,
          inset 0 -0.1em #ff6600;
}

これでばっちり