Как сделать чтобы меню не прыгало?

Question

[gazes12]

https://jsfiddle.net/9qpb5re8/7/

Надо чтобы текст не прыгал вверх и вниз. Как сделать чтобы текст стоял на одном уровне и при наведение вверху появлялся border-top?

Answer 1

[Rst0]

&__item{
		padding: 20px 13px 0px 13px;
                       border-top: 12px solid transparent; /* бордюр есть всегда, но прозрачный*/
		&:hover{
			border-top-color:  red; 
		}
	}

Comments

[gazes12]

А как Бордеру сделать margin-top: -20px; и при наведении margin-top: 0; Чтобы сделать эффект выпадания?

[ForSureN1]

Можно outline использовать, тоже прыгать не будет даже если его нет, но только если в круговую бордер :(

[Rst0]

А как Бордеру сделать margin-top: -20px; и при наведении margin-top: 0; Чтобы сделать эффект выпадания?

чтоб полоска выпадала или название?

[gazes12]

Rst0, Полоска

[Rst0]