Question

我目前正在创建一个与以下链接相同的Web应用程序。我的目标是在点击一个滑块的时候这样做，.slider：之前的psuedo元素（滑过的白色部分）有一个我要在其中间添加的图像和文本（非常小）。所以之前，没有任何白色伪元素部分。就像w3schools的例子一样。但是当它点击时会出现一个大写字母A（例如）。 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch 感谢。

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
    }

    .switch input {display:none;}

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      -webkit-transition: .4s;
      transition: .4s;
    }

    .slider:before {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
    }

    input:checked + .slider {
      background-color: #2196F3;
    }

    input:focus + .slider {
      box-shadow: 0 0 1px #2196F3;
    }

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

    /* Rounded sliders */
    .slider.round {
      border-radius: 34px;
    }

    .slider.round:before {
      border-radius: 50%;
    }
    </style>
    </head>
    <body>

    <h2>Toggle Switch</h2>

    <label class="switch">
      <input type="checkbox">
      <span class="slider"></span>
    </label>

    <label class="switch">
      <input type="checkbox" checked>
      <span class="slider"></span>
    </label><br><br>

    <label class="switch">
      <input type="checkbox">
      <span class="slider round"></span>
    </label>

    <label class="switch">
      <input type="checkbox" checked>
      <span class="slider round"></span>
    </label>

    </body>
    </html>

Answer 1

添加到bru02的答案，您可以使用css attr()函数获取伪选择器上的动态内容。为此，只需向滑块元素添加数据标题（或其他任何内容），并使用content: attr(data-title)到css规则。

看起来像这样（使用flex进行居中）：

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: " ";
  color: white;
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
  content: attr(data-label); /* <-- where the magic happens*/
  display: flex;
  justify-content: center;
  align-items: center;
  color: #444;
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

<label class="switch">
  <input type="checkbox">
  <span class="slider round" data-label="A"></span>
</label>

<label class="switch">
  <input type="checkbox">
  <span class="slider round" data-label="B"></span>
</label>

<label class="switch">
  <input type="checkbox">
  <span class="slider round" data-label="C"></span>
</label>

<label class="switch">
  <input type="checkbox">
  <span class="slider round" data-label="D"></span>
</label>

<label class="switch">
  <input type="checkbox">
  <span class="slider round" data-label="E"></span>
</label>

Answer 2

您只需要更改CSS：
改变这个：

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

对此：

 input:checked + .slider:before {
          -webkit-transform: translateX(26px);
          -ms-transform: translateX(26px);
          transform: translateX(26px);
          content: "A"; //Or something else
        }

Demo

如何更改psuedo元素的Html

2 个答案: