CSS Pseudo Element Changes Height When Moving its Position - html

Question

I'm creating tabs, where each link inside the tab list is in a div with a border - something like:
In order to hide the bottom border of the tabset below the selected tab, I'm adding a pseudo element (:after) that is the full width of the link, and whose height is the same as the bottom border (2px), and also has a bottom value of negative the border height (-2px). I'm running into an issue where, depending on the position (bottom value) of the pseudo element, its rendered height changes. If I set its height to 2px, it fluctuates between 1px and 2px, and does this every 2px when moving its position.
For example, at bottom: 3px, it looks like this (I've made the background red for illustration purposes):
But then if I set bottom: 2px, I get this:
I see this behavior on both firefox and chrome. Here's a codepen illustrating.
And here's an inline snippet of the same code:
.main-container {
padding: 50px;
font-family: arial;
}
.link-container {
display: inline-block;
border: 2px solid #000;
}
a {
position: relative;
display: block;
text-decoration: none;
font-weight: bold;
color: #000;
padding: 5px 5px 15px;
}
a:hover {
background: #ccc;
}
a:after {
content: "";
position: absolute;
z-index: 1;
height: 2px;
left: 0;
right: 0;
bottom: 2px;
background: red;
}
a.tab2:after {
bottom: 3px;
}
<div class="main-container">
<div class="link-container">
<a class="tab1" href="#">Test Tab</a>
</div>
<div class="link-container">
<a class="tab2" href="#">Test Tab</a>
</div>
</div>
What's going on?

Answer 1

I don't know if it's still relevant or not, but I run into the same problem and I couldn't find any solution online so I came up with my own - I think this problem related either with float size of the parent element, either with something else.
But adding "transform: scaleY(1.0001);" to your pseudo-element seems to work for me
.main-container {
padding: 50px;
font-family: arial;
}
.link-container {
display: inline-block;
border: 2px solid #000;
}
a {
position: relative;
display: block;
text-decoration: none;
font-weight: bold;
color: #000;
padding: 5px 5px 15px;
}
a:hover {
background: #ccc;
}
a:after {
content: "";
position: absolute;
z-index: 1;
height: 2px;
left: 0;
right: 0;
bottom: 2px;
background: red;
transform: scaleY(1.0001);
}
a.tab2:after {
bottom: 3px;
}
<div class="main-container">
<div class="link-container">
<a class="tab1" href="#">Test Tab</a>
</div>
<div class="link-container">
<a class="tab2" href="#">Test Tab</a>
</div>
</div>

Answer 2

Most likely your browser is zoomed in on the page. Make sure that you're viewing the page at 100% size by clicking ctrl + 0 and see if the height still changes with the position.
Other than that, if I understand correctly what you want to achieve, you're making things much more complicated than needed.
Firstly, unless you have a reason, the link-container divs are not needed. You can just put the links directly as childs of the main-container div and add borders to them directly.
Secondly, you can just use border-bottom and set it to whatever you like.

Answer 3

Why don't you just do it like this: Remove the pseudo element completely and reduce the border to three sides:
.link-container {
display: inline-block;
border-top: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
}
Here it is in your snippet:
.main-container {
padding: 50px;
font-family: arial;
}
.link-container {
display: inline-block;
border-top: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
}
a {
position: relative;
display: block;
text-decoration: none;
font-weight: bold;
color: #000;
padding: 5px 5px 15px;
}
a:hover {
background: #ccc;
}
<div class="main-container">
<div class="link-container">
<a class="tab1" href="#">Test Tab</a>
</div>
<div class="link-container">
<a class="tab2" href="#">Test Tab</a>
</div>
</div>