css menu list with underline hover animation

1.nav-links ul li a{
2    /* update color of link text to white, size to 13px and
3     delete underline of link-text*/
4    color: #fff;
5    text-decoration: none;
6    font-size: 13px;
7}
8.nav-links ul li::after{
9    /* underline red as a after content it equal a div
10    with background color,..*/
11    content: '';
12    width: 0;
13    height: 2px;
14    background: #f44336;
15    display: block;
16    margin: auto;
17    transition: 0.5s;
18}
19.nav-links ul li:hover::after{
20    /* ul li ::after when hover */
21    width:100%;
22}