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

Question

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>

Welcome to Stack Overflow! Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex) — Paulie_D, Nov 04 '21 at 18:45
When you say going from left to right, what do you want to happen if the p element takes up more than one line? — A Haworth, Nov 04 '21 at 20:29

score 1 · Accepted Answer · answered Nov 04 '21 at 20:44

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>

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

1 Answers1