css - 悬停线动画 : inset on bottom border only instead of outset

Question

这会导致在悬停时以“向下滑动 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;
}

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