I'm having a question, I'm developing a site based on a layout in PSD and in the main menu, it has a hover that makes an underline that is custom: 
I thought of putting it as after and when I did the hover, it would appear, but I'm having a hard time on it, I do not know if it's the best solution either.
Any tips on how to solve?
I did this experiment. You can try something similar.
body {
background: #000;
}
a {
text-decoration: none;
color: #FFF;
padding: 20px 25px;
margin: 40px auto;
}
a:hover::after {
content: "";
width: 150px;
height: 1px;
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(147, 147, 147, 1) 50%, rgba(0, 0, 0, 0) 100%);
display: block;
margin-bottom: 10px;
margin-top: 10px;
}<p><a href="#">A STARMILK</a></p>You can use the following style in your CSS:
.classe:hover::before {
// aqui vai o seu estilo
}