[Animated line-through text] #css #animation

strikethrough.css

.todo-item__text--completed {
  display: inline-block;
  position: relative;
  transition: all .5 cubic-bezier(.55,0,.1,1);
  /* text-decoration: line-through; */
}

.todo-item__text--completed:after {
  content: '';
	position: absolute;
	display: block;
	width: 100%;
	height: 2px;
	box-shadow: 0 1px rgba(255,255,255,0.6);
	margin-top: -0.5em;
	background: black;
	transform-origin: center left;
	animation: strikethrough 1s  cubic-bezier(.55, 0, .1, 1) 1;
}

@keyframes strikethrough {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}