Как исправить танцующие ссылки?

Question

[BranchInCode]

Типо вот код...

.advanrages_container{
	display: flex;
	justify-content: center;
}
.advanrages{
	margin-top: 10px;
	display: flex;
	justify-content: center;
	text-align: center;
	flex-wrap: wrap;
}
.advanrages_item{
	width: 30%;
	margin-bottom: 50px;
}
.advanrages_item p{
	display: flex;
  	justify-content: center;
}
.advanrages_item a{
	color: black; 	
}
.advanrages_item a:hover{
	border-bottom: 2px solid black;
}

<div class="advanrages_container">
		<div class="advanrages">
			<div class="advanrages_item">
				<p><a href="">Game</a></p>
			</div>
			<div class="advanrages_item">
				<p><a href="">Playground and equipment</a></p>
			</div>
			<div class="advanrages_item">
				<p><a href="">Team</a></p>
			</div>
			<div class="advanrages_item">
				<p><a href="">Playing position</a></p>
			</div>
			<div class="advanrages_item">
				<p><a href="">Violation</a></p>
			</div>
			<div class="advanrages_item">
				<p><a href="">Fouls</a></p>
			</div>
			<div class="advanrages_item">
				<p><a href="">General provisions</a></p>
			</div>
			<div class="advanrages_item">
			<p><a href="">Judging</a></p>
			</div>
		</div>			
</div>

Comments

[Сергей Герасимов]

Используйте box-sizing: border-box; для элементов, тогда в размере элементыов не будут участвовать педдинги, мержины и бордеры.

У вас при наведении на ссылку высота увеличивается на 2px, от того и танцы

Answer 1

[tyzberd]

.advanrages_item a{
  color: black; 	
 border-bottom: 2px solid transparent;
}
.advanrages_item a:hover{
 border-color: black;
}

Answer 2

[snap44]

Добавлять не бордер, а псевдоэлемент
https://codepen.io/anon/pen/gjzdyx

Answer 3

[meshoot]

"Прыгание" получается из-за того что элемент имеет разную высоту с бордером и без него. Решения проблемы 2:
1) Делать подчеркивание псевдоэлементом (иногда дизайнеры делают особо упоротые подчеркивания и в этих случаях приходиться пользоваться только этим способом)
2) Задать блоку фиксированную высоту в которую уже включен бордер в вашем случае у меня получилось вот так

.advanrages_item{
  width: 30%;
  height: 30px;
  margin-bottom: 50px;
}

Answer 4

[Ankhena]

Варианты:
1. В обычном состоянии задавать прозрачную (transparent) границу той же толщины.
border: 2px solid transparent;
2. Задавать подчеркивание не с помощью border, а с помощью ::after и позиционирования.
3. Задавать box-sizing: border-box и высоту. Плохой способ, во-первых, высоту вообще вредно задавать, во-вторых, может плавать вертикальное центрирование.
4. Вместо border задавать фон линейным градиентом с четкой границей.

background: linear-gradient(to top, red 2px, transparent 3px)

В вашем случае, я бы выбрала 1ый или 4ый варианты.

Comments

[Ankhena]

Ни один из вариантов не помог?