javascript - 在伪元素的内容中添加定位CSS规则

所以我有一个按钮，其具有：before的伪元素。如果使用content:url();将其内容设置为图像，如何使图像居中？目的是使其居中在开关的白色部分（伪元素）的中间。我相信，如果可以的话，可以使用JavaScript来完成。非常感谢。

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
  content:url(image link);
}

最佳答案

我查看了w3学校页面，并修改了下面的CSS使其实现：

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-image: url("https://st2.depositphotos.com/4326917/9932/v/950/depositphotos_99325768-stock-illustration-black-vector-icon-isolated-on.jpg");
  background-size:cover;
  -webkit-transition: .4s;
  transition: .4s;
}

（我刚刚添加了一些我在Google上找到的随机图标）

What it looks like