Border-bottom и два цвета

.border-shadow { 
  padding: 0 20px; 
  text-decoration: none; 
  display: inline-block; 
  position: relative; 
} 
 
.border-shadow:hover:before, 
.border-shadow:hover:after { 
  content: ""; 
  display: block; 
  height: 3px; 
  width: 50%; 
  position: absolute; 
  bottom: -5px; 
} 
 
.border-shadow:hover:before { 
  background-color: #0000cc; 
  left: 0; 
} 
.border-shadow:hover:after { 
  background-color: #cc0000; 
  right: 0; 
}

<a class="border-shadow" href="#">hover text 1</a> 
<a class="border-shadow" href="#">hover text 2</a> 
<a class="border-shadow" href="#">hover text 3</a> 
<a class="border-shadow" href="#">hover text 4</a>

.border { 
  width: 100px; 
  height: 100px; 
  margin: 20px; 
  background-color: grey; 
  border-bottom-width: 3px; 
  border-bottom-style: solid; 
  border-image: linear-gradient(to right, blue 50%, yellow 51%) 1 1; 
} 
 
span:hover { 
  border-bottom-width: 3px; 
  border-bottom-style: solid; 
  border-image: linear-gradient(to right, blue 50%, yellow 51%) 1 1; 
}

<div class="border"></div> 
 
<span>TEXT!</span>