CODEWITHSUNDEEP
htmlcsshoverbordermargin
shastings
shastings

Reputation: 13

When hovering over link, want to move link towards the left without moving the border

I am trying to figure out if there's a way to move a link when hovering over it without moving its border. I want my links to move left but I don't want the border that I put to go with it. Here is a fiddle with what I am talking about. If you hover over any of the links, you see that the border moves with it, and I'd like to know if it's possible to not move the border.

And here is the code:

.links {
  width: 240px;
  margin-left: -35px;
  text-align: right;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: bold;
  padding: 20px;
  display: block;
}

.links a {
  border-bottom: 1px solid rgba(117, 117, 117, 0.3);
  display: block;
  padding: 8px;
}

.links a:hover {
  border-bottom: 1px solid rgba(207, 166, 255, 0.5);
  font-style: italic;
  margin-right: 10px;
  font-weight: none;
  transition: 0.8s;
  -webkit-transition: 0.8s;
  -moz-transition: 0.8s;
  -o-transition: 0.8s;
}
<div class="links">
  <a href="/">link</a>
  <a href="/">link</a>
  <a href="/">link</a>
  <a href="/">link</a>
  <a href="/">link</a>
</div>

Does anyone have any ideas?

Upvotes: 0

Views: 245

Answers (5)

Anh K
Anh K

Reputation: 96

Adding a span tag is one way but you also can make a list from ul, border the li and animate the a when hover. Then you don't need to wrap every single element with the span tag.

.links > li {
  width: 240px;
  margin-left: -35px;
  text-align: right;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: bold;
  padding: 8px;
  display: block;
  border-bottom: 1px solid rgba(117, 117, 117, 0.3);
}

.links a:hover {
  font-style: italic;
  margin-right: 10px;
  font-weight: none;
  transition: 0.8s;
  -webkit-transition: 0.8s;
  -moz-transition: 0.8s;
  -o-transition: 0.8s;
}
<ul class="links">
  <li><a href="/">link</a></li>
  <li><a href="/">link</a></li>
  <li><a href="/">link</a></li>
  <li><a href="/">link</a></li>
</ul>

So you actually can remove several CSS code lines from .links a.

Upvotes: 0

Uzair Nadeem
Uzair Nadeem

Reputation: 745

Replace .links a:hover styling with the following code.

.links a:hover {
  font-style: italic;
  padding-right: 20px;
  transition: 0.8s;
  -webkit-transition: 0.8s;
  -moz-transition: 0.8s;
  -o-transition: 0.8s;
}

Upvotes: 1

David Lightman
David Lightman

Reputation: 14

Since Padding is spacing inside the border and Margin is for spacing outside the border, just change margin-right to padding-right (as Slawomir said)

Here is the fiddle with the change

[https://jsfiddle.net/092fd4hv/][1]

.links a:hover {
  border-bottom: 1px solid rgba(207, 166, 255, 0.5);
  font-style: italic;
  padding-right: 20px;
  font-weight: none;
  transition: 0.8s;
  -webkit-transition: 0.8s;
  -moz-transition: 0.8s;
  -o-transition: 0.8s;
}

Upvotes: 0

Slawomir Chodnicki
Slawomir Chodnicki

Reputation: 1545

In your hover style, change margin-right: 10px; to padding-right: 20px;

Upvotes: 0

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9439

You can put a <span> tag in your link tag then apply the transition to the <span>

https://jsfiddle.net/DIRTY_SMITH/n4Lsrv3k/2/

HTML

<div class="links">
  <a href="/"><span>link</span></a>
  <a href="/"><span>link</span></a>
  <a href="/"><span>link</span></a>
  <a href="/"><span>link</span></a>
  <a href="/"><span>link</span></a>
</div>

CSS

span:hover {
  border-bottom: 1px solid rgba(207, 166, 255, 0.5);
  font-style: italic;
  margin-right: 10px;
  font-weight: none;
  transition: 0.8s;
  -webkit-transition: 0.8s;
  -moz-transition: 0.8s;
  -o-transition: 0.8s;
}

Upvotes: 1

Related Questions