单击复选框时，是不是可以从左到右文本装饰为 CSS 行设置动画？

Posted 2023-05-08

【中文标题】单击复选框时，是不是可以从左到右文本装饰为 CSS 行设置动画？

【英文标题】：Is it possible to animate a CSS line-through from left to right text-decoration when clicking a checkbox?单击复选框时，是否可以从左到右文本装饰为 CSS 行设置动画？

【发布时间】：2021-12-18 23:27:22

【问题描述】：

我正在尝试使用 CSS 为文本上的一条线设置动画，但是当我单击复选框时，当您选中该框时，它就像一个待办事项列表，但我想要通过线从左到右，谁能告诉我我正在尝试的是否真的可行？如果没有，还有其他方法可以实现这一目标吗？ html：

   <% DoList.forEach(function(elem)  %>
         <div class = "item">
             <input type="checkbox">
            <p class = items> <%=elem %></p>
         </div> 
         <% ); %> 
             <form class = "item"  action="/" method="post">
             <input type="text" name ="toDo" placeholder="I want to..." autofocus required="required" autocomplete="off" >
             <button type="submit" class="rotateimg180">+</button>
          </form>

【问题讨论】：

欢迎来到 Stack Overflow！寻求代码帮助的问题必须包括在问题本身最好是在Stack Snippet 中重现它所需的最短代码。见How to create a Minimal, Reproducible Example

..是的，可以使用伪元素

当你说从左到右的时候，如果p元素占据多于一行，你想发生什么？

【参考方案1】：

假设您要删除的文本是一行，您可以向 p 元素添加一个伪元素，该元素在检查输入时会增长。它可以具有使用线性渐变创建的水平直线的背景图像。

p 
  position: relative;
  display: inline-block;


input+p::before 
  content: '';
  position: absolute;
  background-image: linear-gradient(transparent 0 48%, black 50% calc(50% + 2px), transparent calc(50% + 2px) 100%);
  width: 0;
  height: 100%;
  transition: width 2s linear;
  display: inline-block;


input:checked+p::before 
  width: 100%;

<input type="checkbox">
<p>text here</p>