Link hover: animated bottom border/underline

Question

I've already known this underline/border-bottom animation for a long time (fiddle: https://jsfiddle.net/0ou3o9rn/4/), but I can't seem to find out how I'd have to style my codes correctly... Nothing works.

CSS:

.lists li {
    position: absolute;
    display:block;
    left: 0;
    top:90%;
    margin:0 auto;
    height: 2px;
    background-color: #000;
    width: 0%;
    transition: width 1s;}

HTML:

<div class="lists"><ul>
<li><a href="/">link 1</a></li>
<li><a href="/">link 2</a></li>
<li><a href="/">link 3</a></li>
</ul></div>

This for example doesn't work, but I still want an animated underline to appear when I hover over the lis/as. Can anyone help me? Thank you!

Answer 1

Slider is a box with 2px height. Initially widht of block is 0px. When user hovers over the #name, then width of slider becomes 100%. Now css transition is applied on this width. So, this animation occurs.

    <div id="splash"> <span id="name">random title
        <div class="slider"></div>
        </span>
    </div>


    .slider {
        position: absolute;
        display:block;
        left: 0;
        top:90%;
        margin:0 auto;
        height: 2px;
        background-color: #000;
        width: 0%;
        transition: width 1s;
    }
    #name:hover > .slider {
        width: 100%;
    }
    #splash {
        width:100%;
        height:100%;
        background-color:#fff;
        z-index:999999;
        position:fixed;
    }
    #name {
        color:#000;
        font-family:'Arial-BoldMT';
        font-weight:bold;
        font-size:50px;
        letter-spacing: -2px;
        display:block;
        left: 50%;
        transform: translate(-50%, 0);
        position:absolute;
        top:40%;
        margin:0 auto;
    }

Answer 2

No need of extra markup (pseudo would do the job too anyway ), you could simply use a background-image (or gradient) and use background-size to expand/shrink the effect.background-position can be sused to set where effect can start (demo below does : left, center, right)

.lists li {
  display: inline-block;
  margin:0 1em;
}
.lists li a {
  display: block;
  padding: 3px 1em 3px;
  text-decoration: none;
  background: linear-gradient(to left, gold, gold) no-repeat bottom center;
  background-size: 0% 3px;
  /* will not show */
  transition: 0.25s;
}
.lists li a:hover {
  background-size: 100% 3px;
  /* will expand whole width */
}

/* some more styling ? */
.lists {
  background:gray;
  }
.lists li:first-of-type a {
  background-position: bottom left;
}
.lists li:last-of-type a {
  background-position: bottom right;
}
.lists li a {
  background-color: #222;
  color: #ace
}

<div class="lists">
  <ul>
    <li><a href="/">link 1</a>
    </li>
    <li><a href="/">link 2</a>
    </li>
    <li><a href="/">link 3</a>
    </li>
  </ul>
</div>