为什么a标签设置的overflow: hidden;样式不生效？

overflow: hidden 要正常生效，要求元素本身具备可识别的边界尺寸，且不属于默认的行内格式化上下文，你的代码里有两个直接导致失效的问题：

• <a> 标签默认是 inline 行内元素，这类元素本身不支持 width/height 类尺寸属性设置，你写的 width: 100%、min-height: 100% 对默认状态的a标签完全不生效，元素实际尺寸完全由内部的文字内容撑开，不存在固定的裁剪边界
• a标签的父元素 <li> 没有设置明确高度，你给a写的 min-height: 100% 找不到百分比计算的参考基准，属于无效值，进一步导致a标签没有形成稳定的裁剪区域。

只需要调整a标签的CSS规则，将其转换为块级元素，移除无效的高度设置即可：

.nav-menu ul li a {
    /* 转换为块级元素，让尺寸、overflow属性正常生效 */
    display: block;
    /* 用内边距控制导航项的上下留白，替代无效的min-height设置 */
    padding: 0.2em 0;
    width: 100%;
    position: relative;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
}

修改后a标签会占满父级li的整行宽度，高度由文字内容+内边距决定，overflow: hidden 有了明确的裁剪边界，超出范围的红色伪元素块会被正常裁剪，后续你要做的悬停滑动动画也可以正常实现。
如果不需要a标签占满整行宽度，也可以把display: block换成display: inline-block，适配你的布局需求即可。

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