height属性不能同等地应用于具有相同高度的所有div

Question

我正在设计的网页中遇到一个非常奇怪的问题。 它是纯HTML和CSS，我试图在每个锚元素的底部创建一个动画。所有宽度均为25％，因为我使用网格系统，但锚元素下方的线条显示出一种奇怪的行为，其中一些线条的高度比其他线条小，即使我和＃ 39;给予所有锚元素相同的高度。固定高度让我们说3px在赋予before元素时效果非常好。它造成了这个5％的价值，我不明白为什么。

The screenshot of what's happening with the a elements

.three-columns
{
    width: 25%;
}
a.listings
{

  font-family: "Consolas", 'Roboto', 'Open Sans', sans-serif;
  text-decoration: none;
  display: inline-block;
  height: 100%;
  padding: 2.5%;
  margin-bottom: 5%;
  transition: color 0.5s 0s;
  position: relative;
}

a.listings::before
{
  content: '';
  position: absolute;
  background: green;
  height: 5%;
  bottom: 0;
  left: 0;
  right: 100%;
  -webkit-transition: right 0.5s;
  transition: right 0.5s;
}

a.listings:hover::before
{
  right: 0;
}

三栏是 div ，其中包含 a 的 a 元素>

<div class="three-columns">
    <a class="listings" href="#">dd</a>
</div>

此外，当我在Chrome中检查我的代码并将大小设置为1366 x 768（这也是我的笔记本电脑屏幕的大小）时，它看起来还不错。一旦我关闭检查员并回到实际尺寸，它就会开始表现，就像我附上的屏幕截图所示。
编辑：好的不，即使检查员现在也显示相同的行为