JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<a href="https://www.google.de"><b> Test Hyperlink</b></a>
</div>

CSS

div {
 position:relative;
 display:inline-block;
 width:300px;
 padding:0;
 margin:0;
 border:1px solid #000;
}

div a {
 display:inline-block;
 height:79px;
 width:150px;
 float:right;
 color:#000;
 text-decoration:none;
 background:url('https://image.jimcdn.com/app/cms/image/transf/dimension=300x10000:format=jpg/path/s4c7f66100d621376/image/ia691c98b2a081593/version/1282996479/image.jpg') no-repeat;
}

div b {
 margin-left:-150px;
 margin-top:29px;
 display:inline-block;
 width:150px;
 padding-left:20px;
 box-sizing:border-box;
 border-bottom:3px solid #000;
}

div b:after {
 content:"";
 background:#eee;
 border-bottom:3px solid #f00;
 margin-left:-20px;
 margin-bottom:-3px;
 display:block;
 width:0px;
 transition:2s;
}

div:hover a {
 background:url('https://image.jimcdn.com/app/cms/image/transf/dimension=300x10000:format=jpg/path/s4c7f66100d621376/image/i4f44d23312b4df1d/version/1282996468/image.jpg') no-repeat 0 0;
}

div:hover b:after {
 width:150px;
}