我来帮你搞定这个下划线定位的问题！你现在的问题在于把border-bottom加在了.logo这个容器元素上，而这个容器设置了width: 20%，所以下划线会撑满整个容器的宽度，自然没法精准落在两个字母o的下方。咱们换个思路，用伪元素来实现这个精准定位的下划线：

步骤说明 #

• 把下划线的目标从.logo容器转移到实际的文本元素.logo-word上
• 给文本元素设置相对定位，让伪元素可以基于它进行精准定位
• 利用:after伪元素创建自定义下划线，通过调整位置和宽度来匹配两个o的下方区域

修改后的CSS代码 #

.nav > .nav-header > .logo { 
  display: inline-block; 
  font-size: 22px; 
  color: hsl(0, 0%, 0%); 
  padding: 10px; 
  width: 20%; 
  text-align: center; 
  /* 移除原来的border-bottom */
}

.logo-word {
  position: relative;
  text-decoration: none; /* 清除a标签默认下划线（如果存在） */
  color: inherit; /* 继承父元素文字颜色 */
}

.logo-word:after {
  content: '';
  position: absolute;
  /* 调整left/right值适配两个o的宽度，可根据字体微调百分比 */
  left: 22%;
  right: 22%;
  bottom: -4px; /* 控制下划线与文本的垂直间距 */
  height: 2px;
  background-color: rgb(223 35 44 / 92%);
}

代码解释 #

• position: relative给.logo-word设置相对定位，是为了让伪元素能基于文本的位置进行绝对定位
• :after伪元素通过left和right属性限制下划线的宽度，你可以根据实际字体的字形微调这两个百分比（比如在20%-25%之间调整），直到下划线刚好覆盖两个o的下方区域
• bottom属性控制下划线距离文本底部的垂直位置，调整这个值就能让下划线精准落在你想要的中心位置

这样调整后，下划线就会完全贴合在Doop两个o的下方，而不是整个容器的底部啦！

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