<div class="footer">
  <ul>
    <li><a href="#">Моторные масла для легковой и комерческой техники</a></li>
    <li><a href="#">Пункт</a></li>
    <li><a href="#">Пункт</a></li>
    <li><a href="#">Пункт</a></li>
    <li><a href="#">Пункт</a></li>
    <li><a href="#">Пункт</a></li>
  </ul>
  <ul>
    <li><a href="#">Пункт</a></li>
    <li><a href="#">Пункт</a></li>
    <li><a href="#">Пункт</a></li>
    <li><a href="#">Пункт</a></li>
    <li><a href="#">Пункт</a></li>
    <li><a href="#">Пункт</a></li>
  </ul>
  <ul>
    <li><a href="#">Моторные масла для легковой и комерческой техники</a></li>
    <li><a href="#">Пункт</a></li>
    <li><a href="#">Пункт</a></li>
    <li><a href="#">Пункт</a></li>
    <li><a href="#">Пункт</a></li>
    <li><a href="#">Пункт</a></li>
  </ul>
</div>

.footer {
  display: flex;
  width: 800px;
}

.footer ul {
  width: 33%;
  display: block;
  list-style: none;
}

.footer li a {
  color: black;
  text-decoration: none;
	transition: all .5s ease-out;
  background-image: linear-gradient(rgb(50,50,50), rgb(50,50,50) );
	background-repeat: no-repeat;
	background-position-y: 100%;
  background-size: 0% .2em;
}

.footer li a:hover {
	background-size: 100% .2em;
}