CSS伪元素在移动其位置时会改变高度

Question

我正在创建标签页，其中标签列表中的每个链接都位于带边框的div中 - 例如：

为了隐藏选定标签下方标签集的下边框，我添加了一个伪元素（:after），它是链接的全宽，其高度与底部边框（2px），边界高度（-2px）的负值bottom。我遇到了一个问题，根据伪元素的位置（bottom值），它的渲染高度会发生变化。如果我将其高度设置为2px，则在1px和2px之间波动，并且在移动其位置时每2px执行此操作。

例如，在bottom: 3px，它看起来像这样（我为了说明目的将背景设为红色）：

但是如果我设置bottom: 2px，我就明白了：

我在firefox和chrome上都看到了这种行为。 Here's a codepen illustrating

这是一个相同代码的内联片段：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

发生了什么？

Answer 1

您的浏览器很可能会在页面上放大。通过单击ctrl + 0确保您以100％的大小查看页面，并查看高度是否仍然随位置而变化。

除此之外，如果我正确理解你想要实现的目标，你就会使事情变得比需要的复杂得多。

首先，除非你有理由，否则不需要链接容器div。您可以直接将链接作为主容器div的子项放置，并直接为它们添加边框。

其次，您可以使用border-bottom并将其设置为您喜欢的任何内容。

Answer 2

为什么不这样做：完全删除伪元素并将边框缩小为三边：

.link-container {
    display: inline-block;
    border-top: 2px solid #000;
    border-left: 2px solid #000;
    border-right: 2px solid #000;
}

这是在您的代码段中：

.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>