单击复选框时，是否可以通过从左到右的文本装饰来动画显示CSS行

Question

我正试图用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>

Answer 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>