javascript - 给伪元素的内容添加定位css规则

Question

所以我有一个按钮，它有一个伪元素 :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);
}

Answer 1

我查看了 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;
}

(我只是添加了一些我在谷歌上找到的随机图标)

What it looks like