通过为容器元素设置 overflow: hidden 并确保其为块级或行内块级元素，可强制伪元素过渡动画完全被 border-radius 裁剪，从而实现“从圆角内部开始”的平滑过渡效果。
通过为容器元素设置 `overflow: hidden` 并确保其为块级或行内块级元素，可强制伪元素过渡动画完全被 `border-radius` 裁剪，从而实现“从圆角内部开始”的平滑过渡效果。
在使用 ::after 或 ::before 伪元素实现背景滑入、遮罩过渡等动效时，一个常见问题是：即使父容器设置了 border-radius，伪元素的过渡（如宽度从 0→100%）仍会超出圆角区域渲染，导致视觉上动画“冲出边界”，破坏设计一致性——正如你在 Imgur 示例图中所见。
根本原因在于：border-radius 仅作用于元素自身的背景和边框，不会自动裁剪子元素或伪元素的内容；而 transition 动画中的尺寸变化发生在整个盒模型内，不受父容器圆角约束。
✅ 正确解法是启用视觉裁剪：
为触发过渡的容器（即 #login-now）添加 overflow: hidden，并确保它具有明确的布局上下文（例如设为 display: inline-block 或 block）。这样，任何超出其圆角矩形区域的子内容（包括 :hover::after 生成的宽高变化）都会被精确裁剪。
同时，移除伪元素自身的 border-radius（即 #login-now:after 中的 border-radius: 10px），因为裁剪已由父容器完成，重复设置不仅冗余，还可能因渲染顺序引发边缘锯齿或抗锯齿异常。
优化后的完整代码如下：
立即学习“前端免费学习笔记（深入）”；
#login-now {
position: relative;
display: inline-block; /* 必须设置，使 overflow:hidden 生效 */
font-size: 18px;
color: white;
background-color: #00a295;
padding: 13px 94px;
border-radius: 10px;
line-height: 2.5;
overflow: hidden; /* 关键：裁剪溢出内容 */
text-decoration: none; /* 推荐：修复 <a> 默认下划线 */
}
#login-now-text {
position: relative;
z-index: 2;
}
#login-now::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #007d73;
transition: width 0.35s ease-in-out; /* 推荐细化 transition 属性 */
}
#login-now:hover::after {
width: 100%;
}<a id="login-now" href="#"> <span id="login-now-text">Log in</span> </a>
⚠️ 注意事项：
- <a> 标签默认为内联元素，overflow: hidden 对其无效，因此 display: inline-block（或 block）必不可少；
- 避免对伪元素重复设置 border-radius，否则可能干扰裁剪精度；
- 若需兼容旧版 Safari，可添加 -webkit-mask 方案作为备选，但 overflow: hidden + border-radius 在现代浏览器中已稳定支持；
- 过渡属性建议明确指定 width 而非 all，提升性能与可控性。
此方案简洁、高效、无 JS 依赖，是实现「圆角内过渡」的标准实践。
