为伪元素内容添加定位CSS规则：居中:before伪元素图片的方法

嘿，其实完全不用JavaScript就能搞定这个需求！CSS本身就有足够的属性让你的图片完美居中在开关的白色滑块里，咱们结合你提到的开关组件来一步步调整：

核心方案（纯CSS，无需JS） #

假设你的开关结构和示例一致（label包裹input，用:before做白色滑块），当你用content:url()给伪元素设置图片后，只需要给伪元素添加几个关键属性就能实现居中：

/* 假设这是你的开关滑块伪元素样式 */
.switch:before {
  content: url('你的图片路径'); /* 替换成你的实际图片URL */
  position: absolute;
  top: 4px;
  left: 4px;
  width: 26px; /* 滑块的固定宽度 */
  height: 26px; /* 滑块的固定高度 */
  background-color: white;
  border-radius: 50%;
  transition: .4s;
  
  /* 以下是实现居中的关键属性 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 限制图片尺寸，避免溢出滑块，留一点边距更美观 */
  max-width: 90%;
  max-height: 90%;
  /* 保证图片比例不变，不会被拉伸变形 */
  object-fit: contain;
}

为什么这个方法有效？ #

• 把伪元素设置为flex容器后，justify-content:center和align-items:center会自动让内部的图片（作为flex子元素）在水平和垂直方向都居中。
• max-width/max-height防止图片过大撑破滑块，object-fit:contain则保证图片的比例不会被破坏。

替代方案（用背景图更灵活） #

如果你发现content:url()的方式在某些场景下不好控制，也可以改用背景图的方式，同样能轻松实现居中效果：

.switch:before {
  content: ""; /* 清空content */
  position: absolute;
  top: 4px;
  left: 4px;
  width: 26px;
  height: 26px;
  background-color: white;
  border-radius: 50%;
  transition: .4s;
  
  /* 用背景图实现居中 */
  background-image: url('你的图片路径');
  background-position: center center; /* 水平垂直双居中 */
  background-size: contain; /* 保持图片原始比例 */
  background-repeat: no-repeat;
}

为啥不用JavaScript？ #

你提到可能用JS实现，但其实这种纯样式的需求用CSS完全能搞定，不仅性能更好，代码也更简洁易维护，没必要引入JS来操作DOM或者样式~

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