CODEWITHSUNDEEP
css
user2252219
user2252219

Reputation: 865

Weird underline when hover using pseudos

You can see when you hover, a underline briefly flashes. I'm not sure how to get rid of it.

.toggle2:hover:before {
content:"➝ \00a0 Close profile";
color: #2d2d2d;
text-decoration: none;
}

http://jsfiddle.net/1udwnosL/

Upvotes: 1

Views: 57

Answers (3)

Rejoy
Rejoy

Reputation: 327

Add border to .toggle2. CSS is trying to animate this property as well.

.toggle2 {
    text-decoration: none;
    width: auto;
    border-bottom: solid 1px transparent;
    transition: all .3s ease-out;
}

See the fixed one below http://jsfiddle.net/drk5rxpe/

Upvotes: 0

Eezo
Eezo

Reputation: 1771

It because one line of your css

  .toggle2:hover {
        border-bottom: solid 1px transparent; /*--Remove it and see if it ok for you--*/
        transition: all .3s ease-out;
        text-decoration: none;
    }

Upvotes: 1

user1102901
user1102901

Reputation: 565

Change 

border-bottom: solid 1px transparent;

to 

border-bottom: solid 0px transparent;

Upvotes: 2

Related Questions