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

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

What it looks like

将定位css规则添加到伪元素的内容中

1 个答案: