Hover Boundary

Question

I want to disappear at the border with hovering. I have the following, but it starts, since nothing goes to the gray 1px line (gray by default), and then finally goes to the 2px red line.

How am I 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, you add a hover cursor over several problems, such as moving a page, drawing a border from scratch, etc.

Solution: try setting a transparent border first so that it is not visible there:

 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> 

Answer 2

You need to specify the default border for the hyperlink, which should be transparent in color. You can change the color later. Leave the rest in the transition property.

See for yourself.

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

 <a href="#">Demo Hyperlink</a> 

Hooray!

Answer 3

Why is this happening

You get this because of your transition and the initial value of your element. All elements have default values, even if they are not defined by you. For example, <div> elements always have display: block for each element by default and <b> have font-weight: bold by default.

Similarly, the <a> tag has border-bottom-color: rgb(0, 0, 0) . This is true even when the border thickness is zero.

In chrome, you can see all of this in the “Calculated” section of the “Elements” tab:

So, when the transition begins, it gradually changes color from black to red, which you have identified.

---

How to fix

What you need to do is override the defaults with your own. This is to ensure that he does not start black.

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

The board should always define the same properties for the before-and-during element. Another thing you should be aware of is that using none , since the initial value will usually not give you the behavior you want. The transition requires a numerical value as the starting point (for example, 0 ).