Text animation with CSS - strike through line

Hello folks!
I often love to play around with CSS and try out things whenever I'm free. I always feel animations with just CSS is highly underrated and can be used to achieve 60 fps animations without any JS involved.
I have tried to create a very simple animation, a strike through line, a line passes through a text and the characters in that text are alternatively overlapped onto the line.

HTML

For the HTML part we only need a parent container, it will contain the text that we want to show and the another empty <div></div> which will be used as the line we want to animate.
Notice that the text is not just a string but in a form of a list, so that we can change the z-index of individual characters.

CSS

Styling of the parent container
Just some general styling, height, width, alignment also position as relative, it will be used the position the line with respect to parent.

Styling of Text

• align horizontally with flex
• Remove default styling of li
• z-index set to 1
• z-index of alternative elements set to 3 ( using pseudo class nth-child(2n + 1) or nth-child(2n))
• position:relative - z-index won't work without it.

Styling of line

• position it absolute with respect to the parent element, half way from the top.
• width to be some default value, we will animate width of the line from some initial value lets say 5vw to final value '100vw'.
• z-index should be set as 2, since the li elements of the text is given value 1 and 3 alternatively.
• animation, to increase the width of line.

Link to Sandbox
https://codesandbox.io/s/strike-through-line-animation-q7x9m

Happy coding ♥ !

Comments

[Thomas Verleye]

Screenreaders will read "List item H, list item E, list item L, list item L list item O".
I'd recommend not using ul here and make use of a aria-label="hello" on the parent element ✌️

[Rami Yushuvaev]

Nice. I would replace :nth-child(2n + 1) with :nth-child(even).

[shrek-7]

Yeah, or it can be :nth-child(even), :nth-child(odd), :nth-child(2n)