CODEWITHSUNDEEP
csshover
Tom Baxter
Tom Baxter

Reputation: 2208

CSS inherited border color seems to be ignored

I have an anchor element that I want to draw a border around when the cursor hovers over it. The problem is that the anchor text and everything to its right "jumps" slightly to the right when the border is drawn.

I thought I'd be clever and style the anchor with a border of the background color (via "inherit") so that a default border is drawn when there is no hover. Then, when the user hovers, the red border is simply drawn over the background border and the text should not jump to the right. But this approach does not work.

The main reason I am posting is to understand why my strategy of using the inherited color to draw the border does not work. In other words, why is it that a border of the inherited color is not drawn? Secondarily, I would like to know how to prevent the text from jumping.

Here are the styles and a JSFiddle: https://jsfiddle.net/tlbaxter99/zoLr4m8j/6/

a:link, a:visited {
     border: 1px solid inherit;
}
a:hover {
     border: 1px solid red;
}

Upvotes: 1

Views: 770

Answers (3)

Josh Crozier
Josh Crozier

Reputation: 241198

The main reason I am posting is to understand why my strategy of using the inherited color to draw the border does not work. In other words, why is it that a border of the inherited color is not drawn?

It's not working because 1px solid inherit is an invalid value:

enter image description here

According to MDN, you can't use the inherit value as part of a shorthand declaration (like in your case). Here is the relevant, in-depth quote:

Only the individual properties values can inherit. As missing values are replaced by their initial value, it is impossible to allow inheritance of individual properties by omitting them. The keyword inherit can be applied to a property, but only as a whole, not as a keyword for one value or another. That means that the only way to make some specific value to be inherited is to use the longhand property with the keyword inherit.

Which means that you would need to use the longhand border-color property in order to inherit the border-color value:

Example Here

a:link,
a:visited {
  border: 1px solid;
  border-color: inherit;
}

Secondarily, I would like to know how to prevent the text from jumping.

If you don't want the inherited border color, simply use a transparent border to displace the added border:

Example Here

a {
  border: 1px solid transparent;
}
a:hover {
  border: 1px solid red;
}

Alternatively, rather than using a border, you could also use the outline property to add an outline to the element that doesn't affect the element's box model:

Updated Example

a:hover {
  outline: 1px solid red;
}

Upvotes: 3

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167240

You need to tell the initial position about the border too. So initially, give transparent border, giving the space.

body {
  padding: 1em;
}
a:link,
a:visited {
  border: 1px solid transparent;
}
a:hover {
  border: 1px solid red;
}
<p>
  Hello <a href="">This is a link</a> and here is more text, <b>which doesn't move</b>.
</p>

Now it dares not to move. :) The reason why inherit doesn't work is, none would be the inherited value and it causes border to be 0px. (I am not sure, but that's what is compiled.)

Upvotes: 1

Vidiya Prasanth Pappannan
Vidiya Prasanth Pappannan

Reputation: 723

instead of using inherit , try

transparent

Then your css class will look like the one below

a:link, a:visited {
 border: 1px solid transparent;
}

This will make sure the border space is already taken and when you hover it doesn't hurt

Upvotes: 0

Related Questions