Я не знаю, как решить эту проблему: при наведении элементов 'a' div увеличивается, а другой «a» перемещается.Fix on hover extends element
Спасибо за помощь
https://jsfiddle.net/0r2v2qyp/
Здесь HTML:
<a id="btn_agency" class="btn_presentation">Agenzia</a>
<a id="btn_student" class="btn_presentation">Studente</a>
<a id="btn_prof" class="btn_presentation">Docente</a>
<a id="btn_admin" class="btn_presentation">Segreteria</a>
И CSS:
.btn_presentation {
float: left;
margin: 10px;
color: royalblue;
font-size: 20px;
position: relative;
letter-spacing: 0;
text-transform: uppercase;
transition: all .2s ease-out;
}
.btn_presentation:after {
content: '';
position: relative;
display: block;
margin: 0 auto;
width: 0;
height: 0;
background: red;
transition: all .2s ease-out;
}
.btn_presentation:hover {
letter-spacing: 5px;
transition: all .3s ease-in;
}
.btn_presentation:hover:after {
width: 100%;
height: 2px;
transition: all .2s ease-in-out;
}
Что должно произойти вместо этого? – LGSon
Он хочет, чтобы текст увеличивался при наведении курсора, а другие тексты поблизости были отброшены. – Omnitored
Точно, Omnitored – Toma