<ul>
   <li>
      <a href="#"> Hover Over Me </a>
   </li>
   <li>
      <a href="#"> Hover Over Me </a>
   </li>
   <li>
      <a href="#"> Hover Over Me </a>
   </li>
   <li>
      <a href="#"> Hover Over Me </a>
   </li>
</ul>

body {
  margin: 50px auto;
  font-family: "Lato";
  font-weight: 300;
  width: 600px;
}
li {
  list-style: none;
}

ul a {
  transition: border-width 0.4s;
  text-decoration: none;
  padding: 10px;
  color: orange;
  background: black;
  margin: 2px;
  display: inline-block;
  font-weight: 600;
  text-transform: uppercase;
  border-left: 10px orange solid;
  font-size: 1.5rem;
}

a:hover {
  border-width: 20px;
}