Свойство высоты не применяется одинаково ко всем элементам div с одинаковой высотой
Есть очень странная проблема, с которой я сталкиваюсь на веб-странице, которую я разрабатываю. Это простой HTML и CSS, и я пытаюсь создать анимацию в нижней части каждого элемента привязки. Все они имеют одинаковую ширину 25%, так как я использую сеточную систему, но линии под элементами привязки демонстрируют странное поведение, когда некоторые из линий имеют меньшую высоту, чем другие, хотя я дал одинаковую высоту всем якорные элементы. Фиксированная высота, скажем, 3px отлично работает, когда передается элемент before. Это 5% -ое значение, которое вызывает это, и я понятия не имею, почему.
Скриншот того, что происходит с элементами a
.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, содержащий элементы с классом списков
<div class="three-columns">
<a class="listings" href="#">dd</a>
</div>
Кроме того, когда я проверяю свой код в Chrome и устанавливаю размер 1366 x 768, что также соответствует размеру экрана моего ноутбука, все выглядит нормально. Как только я закрываю инспектор и возвращаюсь к реальному размеру, он начинает вести себя так, как показано на скриншоте, который я прикрепил.
Редактировать: Хорошо, нет, даже инспектор показывает то же самое поведение сейчас