Css: Background Fills On Hover From Bottom To Top:

please take a look at this example: https://www.outsideonline.com/2317131/wilma-rudolph-worlds-fastest-woman Note that when you hover over link, the background animated to fill the

Solution 1:

You're changing wrong parameter:

a:hover { box-shadow: inset 0 -40px 0 -1px #FFF986;

a {
  box-shadow: inset 0 -3px0 -1px#FFF986;
  transition: box-shadow .15s ease-in-out;
  color: black;
  line-height: 40px;
}

a:hover {
  box-shadow: inset 0 -40px0 -1px#FFF986;
}

<ahref="#">Hey Mickey!</a>

Solution 2:

Another solution that uses a 50%/50% linear gradient resized to 200%. To animate the background change the background position:

a {
  background-image: linear-gradient(to top, yellow 50%, transparent 50%);
  background-size: 100%200%;
  background-position: top;
  transition: background-position 0.5s ease-in-out; /** I've changed the time for demo purposes **/color: black;
}

a:hover {
  background-position: bottom;
}

<ahref="#">I'm a link</a><ahref="#">I'm another link</a>

Solution 3:

a {
  box-shadow: inset 0 -3px0 -1px#FFF986;
  transition: box-shadow .15s ease-in-out;
  color: black;
  line-height: 40px;
}

a:hover {
  box-shadow: inset 0 -40px0 -1px#FFF986;
}

<ahref="#">Hey Mickey!</a>