能否不使用absolute position实现按钮hover填充动画效果？

方案1：无伪元素纯背景实现（完全不依赖position属性） #

不需要使用伪元素和定位属性，仅通过背景渐变过渡即可实现相同的悬停扩散填充效果，代码更简洁：

// 按钮基础样式
a {
  display: inline-flex;
  align-items: center;
  padding: 10px 30px;
  border-radius: 999px;
  color: $button-color;
  text-decoration: none;
  // 用径向渐变作为扩散填充层
  background: radial-gradient(circle, $button-color 50%, transparent 51%);
  background-position: center;
  background-size: 0% 0%;
  background-repeat: no-repeat;
  transition: background-size 0.5s ease-out, color 0.5s ease-out;
}

// 悬停样式
a:hover {
  color: #fff;
  // 放大渐变尺寸覆盖整个按钮
  background-size: 400% 400%;
}

方案2：保留伪元素逻辑，移除absolute属性 #

如果你需要保留原有伪元素的实现逻辑，可通过transform调整伪元素位置，无需使用absolute定位：

// 按钮基础样式
a {
  display: inline-block;
  padding: 12px 30px;
  color: $button-color;
  text-decoration: none;
  z-index: 1;
}

a::before{
  // 移除position:absolute相关属性
  content:'';
  border-radius: 50%;
  display: block;
  // 注意这里要把SCSS运算编译为实际数值，原生CSS不支持*运算
  width: 60px;
  height: 40px;
  margin: 0 auto;
  // 用transform调整伪元素位置和按钮重叠
  transform: translateY(-120%);
  text-align: center;
  transition: box-shadow 0.5s ease-out;
  z-index: -1;
}
  
a:hover{
  color: #fff;
}

a:hover::before{
  // 替换$width为实际按钮宽度数值即可
  box-shadow:inset 0 0 0 80px rgba($button-color,1);
}

你删除absolute属性后按钮消失有两个核心原因：

• 你原有代码里的30px*2、20px*2属于SCSS语法，直接写在原生CSS中不会被解析，会导致伪元素宽高为0
• 无absolute定位的伪元素默认属于正常文档流，会排列在按钮文字下方，结合z-index: -1的设置会被上层元素遮挡，视觉上就像按钮消失了

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