CSS Menu Help

Hello,

I tried this a couple of times using what I can find on the internet about CSS. I'm trying to get this CSS code to work. I can get some parts but I might have unnecessary code to make it work correctly.

https://codepen.io/jstn/pen/zuDst this is the link to the code

Just the underline effects only trying to clean up code below

.main-navigation a:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: #E60000;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
.main-navigation a:hover:after {
width: 100%;
left: 0;
}