css a href hover effect

1/* css code */
2body{
3   background-color: #000;
4}
5.container{            
6   top: 50%;
7   left: 50%;
8   transform: translateX(-50%) translateY(-50%);
9   position: absolute;
10}
11li{
12   list-style: none;
13   display: inline-block;
14}
15a{
16   text-decoration: none;
17   color:#fff;
18   font-size: 24px;
19   padding: 0 20px;
20   display: inline-block;
21}
22.link::after{
23   content: '';
24   display: block;
25   width: 0;
26   height: 2px;
27   transition: width .3s;
28   background-color: #fff;
29}
30.link:hover::after{
31   width: 100%;
32   transition: width .3s;
33}
34
35/* html code */
36<div class="container">
37    <li><a href="#" class="link">Home</a></li>
38    <li><a href="#" class="link">About Us</a></li>
39    <li><a href="#" class="link">Services</a></li>
40    <li><a href="#" class="link">Gallery</a></li>
41    <li><a href="#" class="link">Contact</a></li>
42</div>