<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<div class="hover">
<a href="https://webmastermarket.net/category/google-services/" target="_self"> <i class="fab fa-google"> Google</a></i></div>
<div class="hover">
<a href="https://webmastermarket.net/category/facebook-services/" target="_self"> <i class="fab fa-facebook"> Facebook</a></i></div>
<div class="hover">
<a href="https://webmastermarket.net/category/Twitter-services/" target="_self"> <i class="fab fa-twitter"> Twitter</a></i></div>
<div class="hover">
<a href="https://webmastermarket.net/category/Twitter-services/" target="_self"> <i class="fab fa-instagram"> Instagram</a></i></div>
<div class="hover">
<a href="https://webmastermarket.net/category/YouTube-services/" target="_self"> <i class="fab fa-youtube"> YouTube</a></i></div>
<div class="hover">
<a href="https://webmastermarket.net/category/YouTube-services/" target="_self"> <i class="fab fa-tiktok"> Tiktok</a></i></div>

a {
  color: black;
  padding: 5px;
  bottom: 5px;
}

.hover {
  --c:linear-gradient(#000 0 0); /* update the color here */
  
  padding-bottom: .15em;
  background: var(--c), var(--c);
  background-size: .3em .1em;
  background-position:50% 100%;
  background-repeat: no-repeat;
  transition: .3s linear, background-size .3s .2s linear;
  margin-bottom: 6px;
}
.hover:hover {
  background-size: 40% .1em;
  background-position: 10% 100%, 90% 100%;
}

body {
  margin:0;
  height:100vh;
  display:grid;
  place-content:center;
}