点击复选框时能否实现CSS text-decoration line-through从左到右的动画效果

结论 #

该需求可以完全通过纯CSS实现，无需额外JavaScript代码。

实现思路 #

• 原生text-decoration: line-through属性不支持过渡动画，因此我们用绝对定位的伪元素模拟删除线
• 利用CSS相邻兄弟选择器，监听复选框的:checked状态，触发伪元素的宽度过渡动画，实现从左到右划掉的效果

完整实现代码 #

/* 给待办文本设置相对定位，作为伪元素的定位父级 */
.items {
  position: relative;
  display: inline-block;
  padding: 2px 0;
  transition: color 0.3s ease;
}

/* 用伪元素模拟删除线 */
.items::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 2px;
  background-color: #666;
  transition: width 0.3s ease;
}

/* 复选框选中后，修改删除线宽度和文本颜色 */
.item input[type="checkbox"]:checked ~ .items {
  color: #999;
}
.item input[type="checkbox"]:checked ~ .items::before {
  width: 100%;
}

小优化提示：你现有HTML中<p class = items>建议修正为<p class="items">，符合HTML属性书写规范，避免选择器匹配异常。

替代方案（如需扩展复杂逻辑） #

如果需要配合其他业务逻辑（比如选中后同步上报数据、添加更多动画效果），可以用JavaScript监听复选框的change事件，动态给.items添加completed类来触发动画，核心逻辑和CSS方案一致。

内容的提问来源于stack exchange，提问作者Abdullatif Khayat