悬停线动画：仅在底部边框上插入而不是一开始

Question

这会导致在悬停时“向下滑动”中文本下方显示一条线。但是，我希望它出现在“向上滑动”中。任何聪明的解决方案吗？

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

Answer 1

解决了它

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