CSS按钮hover时如何移除伪元素生成的多重边框

问题原因 #

你使用的多重边框是通过::before和::after两个绝对定位伪元素绘制的，而非按钮本身的border属性。现有hover规则仅修改了按钮本体的背景色、文字色，没有覆盖伪元素的边框样式，所以边框不会随hover状态消失。此外你的代码存在冗余笔误：出现了拼写错误的.c-btn--primary:beforee（多了一个e）重复定义，可以直接删除。

具体操作 #

• 第一步：删除冗余的错误代码块：

/* 以下为错误冗余内容，直接删掉即可 */
.c-btn--primary:after,
.c-btn--primary:beforee {
  border: 0.1rem solid #382f2d;
  content: "";
  pointer-events: none;
  position: absolute;
  -webkit-transition: .3s ease;
  -o-transition: .3s ease;
  transition: .3s ease;
}

• 第二步：给hover/focus状态新增伪元素样式规则，因为你已经给伪元素设置了0.3s过渡属性，修改后会自动实现平滑的消失效果，在现有CSS末尾添加如下代码即可：

.c-btn--primary:focus::before,
.c-btn--primary:focus::after,
.c-btn--primary:hover::before,
.c-btn--primary:hover::after {
  border-color: transparent;
}

如果需要更丰富的动效，也可以同步给伪元素添加opacity: 0或者transform: scale(0.9)等属性，调整到符合你的视觉需求即可。

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