单击复选框时,是否可以为从左到右的文本装饰设置 CSS 动画?

Is it possible to animate a CSS line-through from left to right text-decoration when clicking a checkbox?

我正在尝试使用 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>

假设您要删除的文本是一行,您可以向 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>