Html 链接上不显示边框底部

我希望悬停在

li

href项目上的下划线为红色。我所做的是：

.custom-nav ul{
     list-style:none;
     margin: 0;
     padding: 0;
     overflow: hidden;
}
.custom-nav li {
     display:inline;
     font-size:24px;
     margin:40px;
}
.custom-nav a{
     text-decoration: none;
     width: 50%;
}
.custom-nav a:hover{
     color:rgba(255,228,228,1.00);
     border-bottom: 4px solid red;
}

HTML:

---

所以你可以看到，我试着将

a:hover

设置为底部有边框，但似乎不起作用。根本没有下划线出现！我缺少什么？

在这篇文章中，我只修改了

。自定义导航ul:/*溢出：隐藏*/

删除此属性

。自定义导航ul{
列表样式：无；
保证金：0；
填充：0；
}
.海关导航李{
显示：内联；
字体大小：24px；
利润率：40像素；
}
.定制导航a{
文字装饰：无；
宽度：50%；
}
.自定义导航a:悬停{
颜色：rgba（2552281.00）；
边框底部：4倍纯红；
}

<div class="custom-nav">
     <ul>
         <li><a href="#">photography</a></li>
         <li><a href="#">digital art</a></li>
     </ul>
</div>