为什么当前CSS开发场景下overflow:hidden未按预期生效？

问题原因 #

你写的::before伪元素设置了position: absolute，绝对定位元素的裁剪、偏移都以最近的设置了非static定位的祖先元素为基准，当前你的.btn元素的定位是默认的static，所以伪元素的定位上下文是整个页面根元素，自然不会被.btn上设置的overflow: hidden裁剪。

修复方法 #

给.btn添加position: relative属性即可，修改后的.btn样式如下：

.btn {
  display:block;
  position: relative; /* 新增这行即可 */
  background: #0000ff;
  margin: 10px;
  color: #fff;
  font-size: 2rem;
  text-decoration: none;
  text-transform: uppercase;
  padding: 15px 35px;
  overflow:hidden;
}

添加后.btn就变成了伪元素的定位上下文，hover时放大的伪元素超出按钮边界的部分会被正常隐藏。

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