The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #242310

    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?


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

    The solution here was:

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

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


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

    Perhaps a smidge more semantic?

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.