I'm trying to animate with CSS the a line through on a text, but when I click the checkbox it's like a to do list when you check the box it's going to make a line through, but I want the through line going from left to right, Can anyone advise if what I'm trying is actually possible? If not, is there another way to achieve this? 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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Assuming the text you want to strike through is one one line you can add a pseudo element to the p element which grows when the input is checked. It can have a background-image of a straight horizontal line created with a linear-gradient.

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>