how to define pseudo element :: after the same width as its parent - html

Question

.list li::after{
content:" ";
width:100%;
display: block;
position: absolute;
height: 2px;
background-color: green;
}
ul li a{
display: inline-block;
padding: 10px 20px;
line-height: 1.5;
font-size: 0.9em;
color: white;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
margin: 0 2.5px;
}
HTML
<ul>
<li>contact</li>
</ul>
When i get over mouse li tag, I want to have liner after it, but this liner should be the same width as his li. Also I don't know how to active ::after, after `:hover.

Answer 1

Use a simple gradient:
ul li a {
display: inline-block;
padding: 10px 20px;
line-height: 1.5;
font-size: 0.9em;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
margin: 0 2.5px;
background-image:linear-gradient(green,green);
background-size:0% 2px;
background-position:bottom left;
background-repeat:no-repeat;
transition:1s all;
}
a:hover {
background-size:100% 2px;
}
<ul>
<li>contact</li>
</ul>

Answer 2

What I would recommend is to make use of border-bottom on the <a> element. You can control how far away this underline is from the text with padding-bottom.
This avoids the need for ::after completely, and can be seen in the following:
body {
background: black;
}
ul li a {
display: inline-block;
/*padding: 10px 20px;*/
line-height: 1.5;
font-size: 0.9em;
color: white;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
margin: 0 2.5px;
padding-bottom: 10px;
border-bottom: 1px solid green;
}
<ul>
<li>contact</li>
</ul>
Note that the width of the line (the border) is controlled by the amount of horizontal padding on the element. I've commented this padding out in the above example to show the line at the exact same width as the link.