How to use transition to animate span and make the animation flow to the left?

[keysarrr]

Hello.
First off, I am a beginner when it comes to CSS Animation so I am having quite a hard time finding a solution or googling the correct phrase to find an answer that fits best.

I created this codepen that displays a sidebar which includes navigation links nested inside of “li” tags.
I wanted to create a thin border underneath each link and expands it’s width once a viewer hovers.

I used “span” to create the border, gave it a width of 0% and a width of 100% once hovered.
It works perfectly but the issue is that the span animates from the left to right when I would like for it to instead flow from the right to left.

I have a strong feeling the solution is extremely basic…
But I can’t seem to put a finger on a solution that will work for me.

Please help?

[keysarrr]

Posted this too soon because I found the answer right after :/

The solution here was:

Add “float:right;” to #sidebar nav li span
and
Remove “display: block;” from the same line;

Sorry for wasting your time if you were kind enough to read this thread!

[Paulie_D]

You can do this without the span, using a positioned pseudo-element instead.

Perhaps a smidge more semantic?

http://codepen.io/Paulie-D/pen/GqgMZb

[Author]

Posts