Question

我希望悬停在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：

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

所以你可以看到我已经尝试将a:hover设置为有一个边框底部，但它似乎没有用。根本没有下划线！我错过了什么？

Answer 1

在此修改后我只修改了.custom-nav ul:/*overflow:hidden */删除此属性

＆＃13;

.custom-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;

}
.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;
}

＆＃13;

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

＆＃13;

边框底部不显示在链接上

1 个答案: