CODEWITHSUNDEEP
htmlcsscheckboxjquery-animateline-through
Abdullatif Khayat
Abdullatif Khayat

Reputation: 3

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

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>

Upvotes: -1

Views: 934

Answers (1)

A Haworth
A Haworth

Reputation: 36664

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>

Upvotes: 1

Related Questions