为何设置:before伪类定位属性后按钮变为矩形？期望偏移圆形按钮

核心原因 #

你给按钮的:before伪元素设置了绝对定位且四个方向都设为-5px，但这个伪元素默认不会继承按钮的border-radius属性，同时如果按钮没设置position:relative，伪元素会相对于页面或更高层级的包含块定位，最终这个矩形的伪元素会覆盖/延伸在圆形按钮外侧，让你看起来按钮变成了矩形。

另外要注意，伪元素必须加content:''才会显示，既然你看到了按钮形态变化，应该是已经设置了——这个矩形伪元素的视觉效果盖过了原本的圆形按钮。

修正方案 #

场景1：用伪元素实现偏移的圆形外层效果（比如带偏移的边框/背景）

按以下步骤调整代码：

• 给按钮设置position:relative，让伪元素相对于按钮本身定位；
• 给伪元素添加border-radius:50px，和按钮保持一致的圆角；
• 调整伪元素的层级、样式，避免和按钮本身冲突：

button {
  border-radius: 50px;
  position: relative; /* 关键：绑定伪元素的定位基准 */
  width: 60px;
  height: 60px;
  border: none;
  background: #42b983;
}
button:last-child:before {
  content: ''; /* 伪元素必备属性 */
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  border-radius: 50px; /* 同步圆角，保证圆形形态 */
  background: #e6f7ef;
  z-index: -1; /* 把伪元素放在按钮下层，不遮挡按钮内容 */
}

场景2：只是想让按钮整体相对于页面偏移

完全不需要用伪元素，直接给按钮加外边距或位移属性即可：

button:last-child {
  /* 方法1：用外边距偏移 */
  margin: 5px 0 0 5px;
  /* 方法2：用transform位移 */
  transform: translate(5px, 5px);
}

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