Animating bottom border (left to right)

Question

I'm trying to get the bottom border to left to right. I also can't seem to position it directly under the title and it animates from the center outwards. I'm not sure what to change.

https://jsfiddle.net/81uo76hx/2/

.slider {
position: absolute;
display:block;
left: 50%;
top:90%;
transform: translate(-50%, 0);
position:absolute;
top:43%;
margin:0 auto;
height: 2px;
background-color: #000;
width: 0%;
}

Answer 1

hope you will trigger that animation with javascript, you can do it in pure CSS with transition, and setting right from 100% to 0 with extra class as animation transition: right 4s;

.slider is now inside the #name div, so it will move with it and top/left will be relative to this text

https://jsfiddle.net/0ou3o9rn/

version with CSS animation (adding animated class in javascript, but you can bind it somehow to hover, or other event on creation) https://jsfiddle.net/tto1vrz5/

Answer 2

You could set left coordinate with jQuery. Then you need to remove transform from your css. Like this:

$('.slider').css('left', $('#name').position().left).animate({
        width: $('#name').width()
    }, 4000);

.slider {
    position: absolute;
    display:block;
    margin: 0 auto;
    top:90%;
    position:absolute;
    top:43%;
    margin:0 auto;
    height: 2px;
    background-color: #000;
    width: 0%;
}

https://jsfiddle.net/mbz6okmf/