JSFiddle - React, Tailwind, and code Playground

https://teratail.com/questions/294684

by Lhankor_Mhy

HTML

<span class="view-more-hover">test</span>

CSS

.view-more-hover{
position: relative;
transition:all 2s ease-out;
opacity:0.3;
}
.view-more-hover::before{
content: "";
display: block;
position: absolute;
top: 8px;
left: 0px;
width: 73px;
height: 2px;
background: #666;
}
.view-more-hover::after{
content: "";
display: block;
position: absolute;
top: 0;
left: 52px;
width: 15px;
height: 15px;
border: 2px solid;
border-color: transparent transparent #666 #666;
transform: rotate(-135deg);
}

.view-more-hover:hover{
opacity:1;
} 

.view-more-hover::before{
transition:all 2s ease-out;
}
.view-more-hover::after{
transition:all 2s ease-out;
}

.view-more-hover:hover::before{
  width:173px;
} 
.view-more-hover:hover::after{
  left: 152px;
}