くまだどうも、くまだです。
CSSのtext-decorationプロパティのtransitionが効かない場合のメモ。
text-decorationプロパティについてはこちらでも解説。
text-decorationにtransitionが効かない場合の対処法
例えば、以下のように書いてもtext-decorationプロパティにtransitionが効きません。
<div class="container">
<button class="button">ボタン</button>
</div>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.button {
padding: 20px 40px;
background-color: orange;
transition: underline 0.3s;
}
.button:hover {
text-decoration: underline;
}
なので、以下のように書き換えるとtransitionが効くようになります。
.button {
padding: 20px 40px;
background-color: orange;
text-decoration: underline;
text-decoration-color: transparent;
transition: text-decoration-color 0.3s;
}
.button:hover {
text-decoration-color: currentColor;
}
See the Pen text-decoration-color by kuma0605 (@kuma0605) on CodePen.
text-decorationプロパティは、線の太さ、線の種類、線の色などを指定できます。underlineだけだと、それ以外は初期値が適用されます。
線の色だけtransitionを適用したいなら、text-decoration-colorに対してtransitionすれば、効くようになります。
ここまで読んでくださりありがとうございました。