<ul>
    
    <li><a href="#"><i class="fa-brands fa-whatsapp whatsapp"></i></a></li>
  <li><a href="#"><i class="fa-brands fa-telegram telegram"></i></a></li>
  <li><a href="#"><i class="fa-brands fa-viber"></i></a></li>
  <li><a href="#"><i class="fa-brands fa-vk"></i></a></li>
</ul>

*{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body {
      padding:30px 20px;
        display: flex;
        justify-content: right;
        align-items:end;
        height: 100vh;
      background: #39333d;
        
    }

    ul {
        position: relative;
        display: flex;
    }
    ul li {
        position: relative;
        list-style: none;
        margin: 0 15px;
        cursor: pointer;
    }
    ul li a {
        text-decoration: none;
    }
    ul li a .fa-brands {
        font-size: 3em;
        color: rgba(0,0,0,0.3);
    }
    ul li a::before {
        font-family: "FontAwesome";
        position: absolute;
        top: 0;
        left: 0;
        font-size: 3em;
        height: 0;
        overflow: hidden;
        transition: .5s ease-in-out;
        
    }

    
    ul li:nth-child(1) a::before {
        content: "\f232";
        color: #25D366;
        border-bottom: 4px solid #25D366;
    }
    
  ul li:nth-child(2) a::before {
        content: "\f2c6";
        color: #1DA1F2;
        border-bottom: 4px solid #1DA1F2;
    }
  ul li:nth-child(3) a::before {
        content: "\f409";
        color: #9e41c9;
        border-bottom: 4px solid #9e41c9;
    }
ul li:nth-child(4) a::before {
        content: "\f189";
        color: #1e37f5;
        border-bottom: 4px solid #1e37f5;
    }
    ul li:hover a::before {
       
        height: 100%;
    }