JSFiddle - React, Tailwind, and code Playground

HTML

<div class="icon_panel">
  <div class="icon_piece">a</div>
  <div class="icon_piece">b</div>
  <div class="icon_piece">c</div>
  <div class="icon_piece">d</div>
</div>

CSS

.icon_panel {
	  display: flex;
	  flex-direction: column;
	}
	
	.icon_piece {
	  box-sizing: border-box;
	  flex-basis: 20vh;
	  background-color: #aaf;
	  transition: background-color 300ms ease;
	  position: relative;
	}
	
	.icon_piece:hover {
	  background-color: #ddf;
	}
	
	.icon_piece::after {
	  position: absolute;
	  bottom: 0.6vh;
	  left: 50%;
	  height: 0.4vh;
	  background-color: #88d;
	  width: 0%;
	  content: "";
	  display: block;
	  transition: width 300ms ease, left 300ms ease;
	}
	
	.icon_piece:hover::after {
	  width: 70%;
	  left: 15%;
	}