我需要知道为什么我的过渡效果不适用于 input:checked::before答案

【问题标题】：I need to know why my Transition effect not working for input:checked::before我需要知道为什么我的过渡效果不适用于 input:checked::before
【发布时间】：2021-05-05 14:07:04
【问题描述】：

我想给 input 的 before 元素添加过渡效果检查过，但它不起作用。

我需要知道为什么这不起作用。否则我必须尝试一些新的东西

input[type="checkbox"]{
  width: 160px;
  height: 50px;
  appearance: none;
  outline: none;
  position: absolute;
  align-items: center;
  display: flex;
  margin: 13px;
}

input[type="checkbox"]:checked::before{
  position: absolute;
  right: 0;
  transition: 0.5s linear;
}

input[type="checkbox"]::before{
  content: '';
  width: 75px;
  height: 44px;
  right: 100;
  position: absolute;
  margin: 1px;
  transition: 0.5s ;    
}

div{
  width: 200px;
  height: 70px;
  position: absolute;
  align-items: center;
  display: flex;
  margin: 20px;
}

&lt;input type="checkbox"&gt;

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/CSS/transition 你在过渡声明中遗漏了一些东西
另外，right 属性需要单位。
@Sean 感谢您的提示

标签： html css input checked

【解决方案1】：

这里有几件事：

您的正确值需要“px”并将transition: 0.5s linear; 移动到您的input[type="checkbox"]::before。

input[type="checkbox"] {
  background: lightblue;
  width: 160px;
  height: 50px;
  appearance: none;
  outline: none;
  position: absolute;
  align-items: center;
  display: flex;
  margin: 13px;
}

input[type="checkbox"]::before {
  content: "";
  position: absolute;
  background: lightcoral;
  width: 75px;
  height: 44px;
  /* calculate right 100% minus width of :before to get correct position */
  right: calc(100% - 75px);;
  transition: 0.5s linear;
}

input[type="checkbox"]:checked::before {
  position: absolute;
  right: 0;
}

div {
  width: 200px;
  height: 70px;
  position: absolute;
  align-items: center;
  display: flex;
  margin: 20px;
}

&lt;input type="checkbox"&gt;

【讨论】：