如何在主div元素内添加border-bottom，而非外部嵌套div？

嘿，我帮你搞定这个问题！不用额外嵌套div，直接在现有的.headNav元素上就能实现你要的底部蓝色线条效果，给你两种实用方法：

方法1：全屏底部边框（最简单） #

如果想要和.headNav同宽的全屏蓝色边框，直接给.headNav添加border-bottom属性就行，顺便加点内边距让内容和边框不贴得太近：

修改你的.headNav CSS代码：

.headNav {
  position: relative;
  grid-column: 1 / -1;
  overflow: hidden;
  border-bottom: 3px solid #007bff; /* 换成你需要的蓝色色值 */
  padding-bottom: 10px; /* 可选：给内容和边框之间留些空隙 */
}

方法2：自定义宽度的边框（适配导航区域） #

如果截图里的蓝色线条不是全屏，而是和导航链接区域对齐的，用伪元素::after能精准控制位置和宽度，完全不用加新元素：

在你的CSS里新增这段代码：

.headNav::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 32.2%; /* 和你的.link元素的left值保持一致，对齐导航起始位置 */
  width: calc(65%); /* 可以根据实际需求调整宽度，比如覆盖所有导航链接的范围 */
  height: 3px;
  background-color: #007bff; /* 目标蓝色 */
}

小提示 #

因为你已经给.headNav设置了position: relative，所以伪元素的绝对定位会相对于.headNav来计算位置，完美适配你的Grid布局，不会破坏现有结构。

测试的时候调整颜色、高度和宽度参数，就能达到你截图里的效果啦！

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