如何在hover列表元素时将红色下边框移动到导航栏末端并修复边缘不整齐问题

修复方案 #

下边框不整齐问题原因&修复 #

你现有代码里三个问题导致边框显示异常：

• 给li默认设置了全方向透明边框，hover时仅覆盖下边框属性，浏览器渲染时容易出现边框衔接错位
• transition属性仅写在:hover伪类中，只有鼠标移入时有过渡，移出时没有过渡效果，容易出现视觉闪烁
• inline-block属性的li默认基于文本基线对齐，不同长度的li可能出现细微垂直位置偏差

hover时下边框延伸到导航栏末端实现 #

你现在把下边框加在li元素上，li本身宽度仅等于内部文本宽度，自然无法延伸到整个导航栏底部。改用绝对定位的伪元素实现下边框，将伪元素相对header定位，设置宽度撑满header即可实现需求。 #

修正后完整代码 #

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 12%;
  background-color: #1c2236;
  color: white;
  position: fixed;
  left: 0;
  right: 0;
}
.nav-links {
  li {
    list-style: none;
    display: inline-block;
    margin: 0.4rem 1rem;
    padding-bottom: 0.5rem;
    cursor: pointer;
    vertical-align: middle;
    transition: 0.25s;
    position: relative;
    &::after {
      content: '';
      position: absolute;
      bottom: -0.6rem; /* 对应header的上下padding值，定位到header最底部 */
      left: -12%; /* 对应header的左右padding值，延伸到header左边缘 */
      right: -12%; /* 延伸到header右边缘，无需额外设置宽度 */
      height: 2.5px;
      background-color: red;
      transform: scaleX(0);
      transition: transform 0.25s ease;
      transform-origin: left; /* 可自行调整动画起始方向，left为从左到右展开，center为中间展开 */
    }
    &:hover::after {
      transform: scaleX(1);
    }
  }
}
a {
  color: #fff;
}

代码调整说明 #

• 移除原有li的border相关设置，改用::after伪元素实现下边框，不受li本身宽度限制
• 把transition属性移到li的默认状态，鼠标移入移出都有平滑过渡，避免边框闪烁
• 新增vertical-align: middle统一所有li的垂直对齐方式，解决边框不整齐问题
• 伪元素设置左右偏移量抵消header的padding，自然撑满整个导航栏宽度

内容的提问来源于stack exchange，提问作者MOAZ ALI