如何为链接添加悬停转换？

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;
}