アンダーライン
text-decorationの機能が豊富に
リンクのアンダーラインを調べていたら驚いた話。発見があったので、メモ。リンクのアンダーラインをどうしようか、ネットで探しているとこんな便利なことになっていました。昔はカスタマイズするために、text-decoration: noneにしてから、padding-bottomで間隔を調整し、border-bottomであれこれしていたのが、これらの設定だけでできちゃいます。もちろん、transitionも効きます。ずいぶん便利になったものですね。
CSSのtext-decorationは意外と色々なスタイル調整ができる
Zenn
.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;
}
}
コメント
選曲
The Moldau