アンダーライン

リンクのアンダーラインを調べていたら驚いた話。発見があったので、メモ。リンクのアンダーラインをどうしようか、ネットで探しているとこんな便利なことになっていました。昔はカスタマイズするために、text-decoration: noneにしてから、padding-bottomで間隔を調整し、border-bottomであれこれしていたのが、これらの設定だけでできちゃいます。もちろん、transitionも効きます。ずいぶん便利になったものですね。

.class {
 text-decoration: underline;
 text-decoration-color: #000;
 text-decoration-thickness: 2px;
 text-underline-offset: 6px;
 transition: all 0.5s
 &:hover {
  text-decoration: none;
  text-underline-offset: 0px;
 }
}