.bttn:before与.bttn:hover:before的区别是什么？附表单按钮实现代码

我来给你拆解一下这两个CSS选择器的区别，其实它们控制的是同一个伪元素在不同状态下的样式：

• 默认状态下的 .bttn:before
  这是按钮未被任何交互时，伪元素的基础样式：

  • 初始设置 left: 50% 和 right: 50%，让这个伪元素的宽度被压缩为0，肉眼完全看不到它的存在
  • opacity: 0 进一步确保它是完全透明的，就算有宽度也不会显示
  • 提前定义了 transition: 0.5s all ease 过渡动画，为后续状态变化的平滑效果做铺垫
  • 虽然设置了 background-color: #FF0072，但前面的属性让这个粉色背景在默认状态下完全隐藏

• 悬停状态下的 .bttn:hover:before
  这是当鼠标悬停在.bttn按钮上时，伪元素触发的样式：

  • 覆盖了默认的left和right属性，设置为left: 0、right: 0，让伪元素直接撑满整个按钮的宽度
  • 将opacity改为1，让粉色背景完全显示出来
  • 同样保留了过渡动画，让宽度从0到100%、透明度从0到1的变化过程在0.5秒内平滑完成，实现了按钮从中间向两边展开填充的交互效果

简单来说，前者是伪元素的「隐身待机状态」，后者是鼠标hover时触发的「显示展开状态」，两者配合实现了按钮的动态hover效果。

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