CODEWITHSUNDEEP
css
NiseNise
NiseNise

Reputation: 1162

How to stop link move on hover

I have a problem some of my links keep moving a couple of pixel on hover does anyone know a fix for this.

Currently me code is like this 

<a class="read-more-link" href="/what-to-do-now/week49/flowers-checklist/">See all Flowers jobs</a>

the css

    a:hover{
  border-bottom:1px solid #000;
}
a{
    color: #172D02;
    font-weight: bold;
    text-decoration: none;
}



.checklist .read-more-link:first-letter {
    text-transform: uppercase;
}

.checklist .read-more-link {
    clear: both;
    display: block;
    float: left;
    line-height: 1.1;
    text-transform: lowercase;
    background: url("/images/double_arrow.png") no-repeat scroll left center transparent;
    padding-left: 14px;
}

Upvotes: 2

Views: 10952

Answers (3)

Neeraj
Neeraj

Reputation: 1

You can add one empty container like below, on top:

<div class="container" style="height:5px"></div>

Upvotes: -1

Curtis
Curtis

Reputation: 103358

This is because you have border-bottom set on hover.

Therefore this is adding a 1px border underneath your link when it is hovered over. This can affect the position of other relative elements.

Change this to text-decoration:underline; or add a hidden border-bottom to the standard style:

a {
border-bottom:solid 1px transparent;
}

Upvotes: 8

Sonal Khunt
Sonal Khunt

Reputation: 1894

write

  a:hover{
      text-decoration:underline;
    }

in place of

    a:hover{
  border-bottom:1px solid #000;
}

and remove this there is no need of it

.checklist a, .checklist a:visited {
    border-bottom: 0 none;
    position: relative;
}

Upvotes: 0

Related Questions