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

Question

So I have a button that has a pseudo element of :before. If I set the content of it to an image using the content:url(); , how can I center that image? The goal is for it to be centered in the middle of the white part of the switch(the pseudo element). I believe it could be done with JavaScript if possible at all. Thanks alot.

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

I looked at the w3 schools page and modified the bit of css below to make that happen:

.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;
}

(I just added some random icon that I found on google)

What it looks like