div.hightlight-verticle-wrap {
display: block;
width: 100%;
}
div.hightlight-verticle-wrap .hightlight-verticle-underline {
--thickness: .1em;
background: linear-gradient(90deg, transparent, currentColor 0) no-repeat right bottom / calc(var(--strike) * 100%) var(--thickness);
background-image: linear-gradient(#ffa50021, #ffa50051, #ffa500);
transition: background-size .4s ease;
--strike: 1; background-position-x: left;
display: inline;
}
div.hightlight-verticle-wrap .hightlight-verticle-underline:hover{
--thickness: 1em;
background: linear-gradient(90deg, transparent, currentColor 0) no-repeat right bottom / calc(var(--strike) * 100%) var(--thickness);
background-image: linear-gradient(#ffa50021, #ffa50051, #ffa500);
transition: background-size .4s ease;
--strike: 1; background-position-x: left;
display: inline;
}
div.hightlight-verticle-wrap .hightlight-verticle-underline:before {
width: calc(100% + 8px);
}
div.hightlight-verticle-wrap:hover .hightlight-verticle-underline:before {
height: 45%;
z-index: 1;
}