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