css- animation, under a label, underlined text, and animation is extended from the middle to both sides of the opening

effect:

html:

<div class = "Warp">
<a class="welcome"> look forward to your participation </a>
</ div>

css:

{.warp
width: 100px;
height: 40px;
background-Color: Bisque;
}
.welcome {
Cursor: pointer;
}
.welcome After :: {
/ * position: relative;
bottom: 0; * /
Content: ""; / * content must be used to define the value of at least Inserts empty * /
display: Block; / * display the default value of pseudo-element is inline default display may be changed by setting the block. * /
Transition: All 200ms EASE-in-OUT 0s; / * transitional effects * /
Cursor: pointer;
border-Top: 1px Solid Red;
margin: 0 Auto; / * from the intermediate flared * / to both sides of
width: 0;
}
.welcome: :: After hover {
width: 100%;
}

// In order to see more clearly, so css version screenshot