使用:after伪元素后无法实现按钮动画的问题求助

嘿，我来帮你搞定这个按钮动画！你的思路是对的，但当前代码里的:after伪元素因为缺少尺寸和初始位置设置，所以根本没显示出来，自然看不到动画效果。我来帮你修正代码，同时给你一些伪元素的实用建议。

修正后的完整代码 #

CSS 部分 #

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.btn {
  border: 1px solid #65bb39;
  color: #fff;
  background-color: #65bb39;
  cursor: pointer;
  padding: 25px 80px;
  display: inline-block;
  margin: 15px 30px;
  text-transform: uppercase;
  outline: none;
  position: relative;
  /* 只针对需要变化的属性做过渡，性能更优 */
  -webkit-transition: color 0.3s;
  -moz-transition: color 0.3s;
  transition: color 0.3s;
}

.btn:after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: 0;
  width: 100%;
  /* 初始高度为0，隐藏在按钮底部 */
  height: 0;
  background-color: #fff;
  border: 1px solid #65bb39;
  /* 只过渡高度属性 */
  -webkit-transition: height 0.3s;
  -moz-transition: height 0.3s;
  transition: height 0.3s;
}

.btn:hover {
  /* 悬停时文字变绿色，和边框呼应 */
  color: #65bb39;
}

.btn:hover:after {
  /* 悬停时高度变为100%，实现从下往上填充 */
  height: 100%;
}

HTML 部分 #

<div class="text">
  <span class="btn">Test</span>
</div>

代码说明 #

1. 伪元素基础设置：给:after设置了left:0、bottom:0、width:100%，初始height:0，这样它一开始完全隐藏在按钮底部，看不到。
2. 悬停动画触发：当鼠标悬停时，:after的height从0过渡到100%，就实现了从下往上填充白色的效果。
3. 文字颜色适配：因为填充白色后原白色文字会看不清，所以给.btn:hover加上了文字颜色变为#65bb39的过渡，保证可读性。
4. 性能优化：把过渡属性从all改成了具体的color和height，避免不必要的属性过渡，提升动画流畅度。

:before & :after 伪元素实用建议 #

• 必须设置content：哪怕是空字符串''，否则伪元素不会被浏览器渲染出来，这是新手最容易踩的坑！
• 定位依赖父元素：如果要让伪元素相对于父元素定位，父元素必须设置position: relative（你已经做对了这一点👍）。
• 默认是inline元素：如果要给伪元素设置宽高，要么把它改成block/inline-block，要么用position: absolute（绝对定位元素默认是块级）。
• 层级控制用z-index：通过调整z-index可以控制伪元素和父元素内容的叠放顺序，比如这里把:after的z-index设为-1，让它在文字下方，不会遮挡文字。
• 动画尽量精准：避免用transition: all，只针对需要变化的属性设置过渡，减少浏览器的重绘重排，提升性能。
• 灵活组合使用：:before和:after可以分别实现不同的视觉效果，比如一个做边框动画，一个做背景填充，但要注意它们的层级关系，避免互相遮挡。

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