JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">awesome content</div>

CSS

div.box {
    position: relative;
    width: 200px;
    padding: 15px 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    background-color: #ccc;
    border-left: 10px solid transparent;
}
div.box:hover {
    border-left: 10px solid #0a0;
}
div.box:after {
    display:block;
    position: absolute;
    bottom: 0;
    left:-10px;
    width:calc(100% + 10px);
    height:1px;
    border-bottom: 1px solid #000;    
    content: " ";
}
div.box:hover:after {
    width:100%;
    left:0px;
}