为何::after伪元素宽度未相对父元素？导航下划线问题咨询

问题原因 #

你的::after伪元素使用了绝对定位，但父元素.main-nav-link未设置position: relative，导致伪元素的定位基准不是链接本身，而是上层的非静态定位容器，最终宽度远超预期。

修复步骤 #

1. 给.main-nav-link添加相对定位，让伪元素以它为基准定位：

.main-nav-link {
  position: relative;
  /* 保留原有其他样式 */
}

2. 调整激活态伪元素的样式，确保宽度匹配链接容器：

.main-nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -8px; /* 按需调整下划线与文本的间距 */
  left: 0;
  width: 100%;
  height: 2px;
  background-color: hsl(26, 100%, 55%); /* 匹配设计图的橙色 */
}

3. 若需要下划线仅匹配文本宽度（而非整个链接容器），给.main-nav-link添加行内块属性，让容器宽度收缩至文本宽度：

.main-nav-link {
  position: relative;
  display: inline-block;
}

额外优化 #

• 若链接带有左右内边距，希望下划线与文本对齐，可调整伪元素的left/right值，或用transform: translateX(-50%)配合left: 50%实现居中。
• 给未激活状态的链接添加透明伪元素，避免激活时布局跳动：

.main-nav-link::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: transparent;
  transition: background-color 0.3s ease;
}
.main-nav-link.active::after {
  background-color: hsl(26, 100%, 55%);
}

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