HTML/CSS Bottom Border animated on button - html

Question

Im new to css and html and im trying to make a good looking website for my FiveM RP Server, and im having issues with the buttons
a:visited {
color: white;
text-decoration: none;
}
a:link {
color: white;
text-decoration: none;
}
a:after {
border-bottom: solid 3px #019fb6;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
a:hover {
color: green;
border-bottom: 3px solid #004F10;
transform: scaleX'(1);
}
a:active {
color: darkgreen;
}
<header>
<ul>
<h2>Home</h2>
<h2>Rules</h2>
<h2>Discord</h2>
</ul>
</header>

Answer 1

I have displayed the "a" tag as an inline-block so that it doesn't occupy the whole container width.
In your code, you forgot to add content property. And the hover is applied to the ::after selector of the "a" tag not the "a" tag itself. Here is the fix to your code.
a{
display: inline-block;
color: white;
text-decoration: none;
}
a::after {
display: block;
content: '';
border-bottom: solid 3px darkgreen;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
a:hover::after{
transform: scaleX(1);
}
a:active{
color: darkgreen;
}
a:visited{
color: white;
text-decoration: none;
}

Answer 2

Check this CodePen from Peter, he did exactly what you want.
Code:
<nav>
<div id="wrapper">
<ul>
<li>item1</li>
<li>item2</li>
<li class="different">item3</li>
<li class="different">item4</li>
</ul>
</div>
</nav>
CSS:
body, html{
width:100%;
height:100%;
background-color: #999999;
}
*{
box-sizing:border-box;
margin:0;
padding:0;
list-style:none;
font-family: Helvetica;
}
nav{
width: 100%;
height: 50px;
position: fixed;
top: 0;
left:0;
background-color: #333333;
}
#wrapper{
width: 100%;
height: 100%;
overflow: hidden;
display: block;
float: left;
}
#wrapper ul{
diplay: block;
width: 50%;
margin: 0 auto;
height: 100%;
text-align: center;
}
#wrapper li{
display: block;
float: left;
text-align: center;
width: 25%;
height: 100%;
transition: all ease-in-out .2s;
}
#wrapper a{
display: block;
float: left;
color: white;
width: 100%;
padding: 0 .5em;
line-height: 50px;
text-decoration: none;
font-weight: bold;
}
li.different{
border:none;
position: relative;
}
li.different:hover{
border: none;
}
li:hover {
border-bottom: 5px solid #FFFFFF;
}
.different::after{
content: '';
position: absolute;
width: 0px;
height: 5px;
left: 50%;
bottom:0;
background-color: white;
transition: all ease-in-out .2s;
}
.different:hover::after{
width: 100%;
left: 0;
}
CodePen

Answer 3

There are total 3 animation.
1st with default top-down animation.
2nd with fade animation
3rd with fade and scale animation.
.main-container{
display: flex;
}
/* First tag */
.testAni {
font-size: 50px;
display: inline-block;
position: relative;
color: darkgreen;
text-decoration: none;
margin-right: 20px;
}
.testAni:after {
content: '';
position: absolute;
border-bottom: 5px solid darkgreen;
width: 100%;
left: 0;
top: 30px;
transition: 0.5s all ease;
}
.testAni:hover:after {
top: 100%;
}
/* Second tag */
.testAni2:after {
content: '';
position: absolute;
border-bottom: 5px solid darkgreen;
width: 100%;
left: 0;
top: 30px;
transition: 0.5s all ease;
opacity: 0;
}
.testAni2:hover:after {
top: 100%;
opacity: 1;
}
/* Third tag */
.testAni3:after {
content: '';
position: absolute;
border-bottom: 5px solid darkgreen;
transform: scale(0.1);
left: 0;
top: 30px;
transition: 0.5s all ease;
opacity: 0;
}
.testAni3:hover:after {
top: 100%;
transform: scale(1);
opacity: 1;
}
<div class="main-container">
<h2><a class="testAni" href="index.html">Home</a></h2>
<h2><a class="testAni testAni2" href="index.html">Home</a></h2>
<h2><a class="testAni testAni2 testAni3" href="index.html">Home</a></h2>
</div>