CSS桌面端导航链接hover左括号间距异常问题求助

AI 小北

2026-6-14

导航链接Hover括号效果优化需求

我需要实现仅桌面端导航链接hover时显示左右括号，移动端不显示该效果。当前代码中右括号（nav-link:hover::after）显示正常，但左括号（nav-link:hover::before）距离链接过近，位置不符合预期。

修复方案

问题根源

.nav-link未设置position: relative，导致伪元素的absolute定位参考父级元素而非链接本身，左括号位置偏移
未给伪元素设置合理的水平间距，导致左括号紧贴链接文本

具体修改步骤

给.nav-link添加position: relative，让伪元素以链接为定位基准
在桌面端媒体查询中，调整伪元素的left/right值控制括号与文本的间距
保持移动端默认隐藏伪元素，仅在桌面端启用显示

修改后的关键CSS代码

/* 基础样式：移动端默认隐藏括号 */
.nav-link {
  text-decoration: none;
  position: relative; /* 新增：伪元素定位基准 */
}

.nav-link:hover::before {
  content: "[";
  display: none;
  color: $primary;
}

.nav-link:hover::after {
  content: "]";
  display: none;
  color: $primary;
}

/* 桌面端（992px及以上）样式 */
@media (min-width: 992px) {
  /* 保留原有桌面端导航样式 */

  .nav-link:hover::before {
    display: inline-block;
    position: absolute;
    left: -15px; /* 调整左括号与文本的间距，可按需修改 */
    color: $primary;
  }
  
  .nav-link:hover::after {
    display: inline-block;
    position: absolute;
    right: -15px; /* 调整右括号与文本的间距，可按需修改 */
    color: $primary;
  }
}