使用::after伪元素实现按钮缩放时位置异常问题求助

问题描述 #

需要在.btn元素下方创建可缩放的伪元素以添加样式，但当前伪元素与按钮并排，缩放效果未正常生效，原代码如下：

原CSS代码 #

.btn:link,
btn:visited {
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  border-radius: 100px;
  transition: all 0.2s;
  position: relative;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0px 10px 30px #00000020;
}

.btn:active {
  transform: translateY(-1px);
  box-shadow: 0px 5px 10px #00000020;
}

.btn-white {
  background-color: #fff;
  color: #777;
  padding: 15px 40px;
}

.btn::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
}

.btn-white::after {
  background-color: red;
}

.btn:hover::after {
  transform: scale(2);
}

原HTML代码 #

<header class="header">
  <div class="logo-box">
    <img src="img/logo-white.png" alt="Logo" class="logo" />
  </div>
  <div class="text-box">
    <h1 class="heading-primary">
      <span class="heading-primary-main">Outdoors</span>
      <span class="heading-primary-sub">is where life happens</span>
    </h1>
    <a href="#" class="btn btn-white">Discover our tours</a>
  </div>
</header>

错误分析与修复方案 #

1. 修复选择器语法错误 #

原代码中btn:visited缺少类选择器前缀.，导致该规则无法生效，按钮被访问后position: relative会失效，伪元素定位错误。修正为：

.btn:link,
.btn:visited { /* 补充类选择器前缀 */
  /* 原有样式 */
}

2. 修正伪元素定位与形状 #

• 绝对定位的伪元素必须设置left: 0，确保它从按钮左侧起始位置定位，避免出现并排显示的问题；
• 伪元素的border-radius需与按钮保持一致（100px），原代码用100%会变成圆形，和按钮的圆角矩形样式不匹配；
• 绝对定位元素无需display: inline-block，可改为display: block或直接省略，减少冗余设置。

3. 添加伪元素过渡动画 #

伪元素需要单独设置transition属性，否则缩放时没有平滑动画效果；同时可添加opacity属性，让缩放后的伪元素逐渐淡出，增强视觉层次感。

修正后的完整CSS代码 #

.btn:link,
.btn:visited {
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  border-radius: 100px;
  transition: all 0.2s;
  position: relative;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0px 10px 30px #00000020;
}

.btn:active {
  transform: translateY(-1px);
  box-shadow: 0px 5px 10px #00000020;
}

.btn-white {
  background-color: #fff;
  color: #777;
  padding: 15px 40px;
}

.btn::after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 100px; /* 与按钮圆角保持一致 */
  position: absolute;
  top: 0;
  left: 0; /* 补充左侧定位 */
  z-index: -1;
  transition: all 0.4s; /* 添加过渡动画 */
}

.btn-white::after {
  background-color: red;
}

.btn:hover::after {
  transform: scale(1.5); /* 调整缩放比例，避免过度放大 */
  opacity: 0; /* 缩放后淡出 */
}

效果说明 #

修正后，伪元素会正确定位在按钮背后（z-index:-1确保层级在按钮下方），鼠标悬停时伪元素会平滑缩放并淡出，完全符合预期的视觉效果。

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