如何实现CSS导航hover菜单项下方显示与文本等宽的提示条

问题根因 #

你写的代码不生效主要有三个核心原因：

1. li默认是块级元素，宽度会自动撑满父级ul的宽度，就算伪元素设置100%宽度，也只会匹配li的满宽，而非内部文本的宽度
2. 绝对定位的伪元素没有设置对应的相对定位父级，默认会相对页面根元素排版，位置逻辑本身就有问题
3. 空content的伪元素设置fit-content没有实际内容可以撑开宽度，自然不会生效

修复方案 #

只需要调整几个CSS属性即可实现需求：

• 给li添加position: relative，作为伪元素的定位上下文
• 把li设置为inline-block，让li的宽度完全由内部文本撑开
• 调整伪元素的位置属性，让色块对齐文本左边缘、显示在文本下方
• 保留width: 100%即可，此时的100%就是li的宽度也就是文本的宽度，不需要用fit-content

完整可运行代码 #

* {
  cursor: default;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  padding: 20px;
}
li {
  position: relative;
  display: inline-block;
  margin-right: 30px;
  list-style: none;
  font-size: 16px;
  line-height: 1.5;
}
li:hover::after {
  content: '';
  height: 10px;
  width: 100%;
  background-color: red;
  position: absolute;
  left: 0;
  bottom: -12px; /* 可自行调整数值修改色块和文本的间距 */
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

如果你的导航需要用弹性布局等其他排版方式，也可以把文本包裹在<span>标签内，把伪元素挂载到<span>上，效果完全一致。

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