html - 如何为链接添加悬停过渡？

Question

我想为我的链接添加过渡效果。我希望 text-decoration(即 underlink)慢慢出现。我试过这个但它不起作用:

#slink{
    transition-property: text-decoration;
    transition-duration: 500ms;
    transition-timing-function: linear;
}
#slink:hover{
    background: none;
}

我需要做什么才能让它工作？

Answer 1

你可以使用 border-bottom!

a {
  transition: border-bottom 1s ease;
}
a:hover {
  border-bottom: 1px solid blue;
}