Fade in border on hover

Question

I want to fade in a border on hover. I have the following but it starts off as nothing then goes to a 1px grey line (grey is default color) and then eventually goes to a 2px red line.

What am I going wrong?

a{ 
    border-bottom: none;
    transition: border-bottom 1s;
}
a:hover{
    border-bottom: 2px solid red;
}

<a href='#'>hover here</a>

Answer 1

When an element has no border, then you add on hover you face a few issues such as page moving, drawing border from scratch etc

Solution: Try setting border to transparent first, so it's there but cannot be seen:

a { 
    border-bottom: 2px solid transparent; /* <- here */
    transition: border-bottom 1s;
    text-decoration: none; /* I added this for clarity of effect */
}
a:hover {
    border-bottom: 2px solid red;
}

<a href="">testing border</a>

Edit

Actually, you don't need to declare the whole border again, just change the color:

a:hover {
    border-color: red; /* <-- just change the color instead */
}