效果如下:
html
<a class="title">Teacher</a>
css
.title {
width: 100px;
position: relative;
display: inline-block;
padding-bottom: 2px;
text-decoration: none;
background-color:transparent;
-webkit-text-decoration-skip:objects;
&:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
&::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
transform: scaleX(0);
background-color: #FF6700;
transform-origin: bottom right;
transition: transform .3s ease-in-out;
}
}