JSFiddle - React, Tailwind, and code Playground

HTML

<p><a class="block" href="#">Awesome hover effect using css</a><a class="block" href="#">css</a></p>
	<p><a class="block" href="#">Awesome</a> , <a href="#">Hover</a> , <a href="#">Effect</a></p>
  <p>
   <a href="#"><img src='' alt='test' /></a>
  </p>

CSS

body {
	  font-size: 21px;
	  font-family: sans-serif;
	  padding: 10px;
	  background: #f7f7f7;
	}

	a, a:visited {
	  text-decoration: none;
	  position: relative;
	  color: #333;
	}
	a:after, a:visited:after {
	  content: '';
	  height: 2px;
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  width: 0%;
	  background: #333;
	  transition: 0.3s;
	}
	a:hover:after, a:visited:hover:after {
	  width: 100%;
	}
	a.block, a:visited.block {
	  display: block;
	  padding: 10px;
	}
	a.block:hover, a:visited.block:hover {
	  background: #ccc;
	}