这会导致在悬停时以“向下滑动 Action ”的方式在文本下方显示一条线。但是,我希望它出现在“向上滑动 Action ”中。对此有什么巧妙的解决方案吗?
CSS:
.nav a {
color:#f90;
font-size:15px;
font-weight:700;
text-transform:uppercase;
vertical-align:middle;
font-family:"oswald",sans-serif;
font-weight:300;
transition:color .2s, border-bottom 0.5s;
padding-bottom: 8px;
border-bottom: none;
}
.nav a:hover {
color:#69D2E7;
border-bottom: solid 14px #69D2E7;
}
最佳答案
解决了
.nav a {
color:#f90;
font-size:15px;
font-weight:700;
text-transform:uppercase;
vertical-align:middle;
font-family:"oswald",sans-serif;
font-weight:300;
transition:color .2s, padding-bottom 0.5s;
>>>>>>>>>>>padding-bottom: 18px;
border-bottom: solid 8px #69D2E7;
}
.nav a:hover {
color:#69D2E7;
>>>>>padding-bottom: 10px;
}
关于css - 悬停线动画 : inset on bottom border only instead of outset,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27396044/