При использовании transition
увеличивается текст, но вместе с ним и сдвигаются все остальные элементы. Как сделать так, чтобы увеличивался только текст без изменений общей разметки.
з.ы. - знаю что это что-то нужно с position
придумывать, но вот что и куда - увы не знаю.
http://jsfiddle.net/Lnjmj7zu/2/ - код и стиль к нему
nav {
padding-top: 30px;
height: 150px;
}
nav ul {
height: 40px;
padding-top: 5px;
background-image: url(image/nab_back.png);
}
nav ul li {
display: inline;
border-right: 1px solid;
border-color: #5c5656;
}
nav ul li:last-child {
border-right: 0px;
}
nav ul li a {
text-decoration: none;
color: #2a2a2a;
font-size: 16pt;
padding: 0px 10px 0 10px;
}
nav ul li a:hover {
border-bottom: 2px solid #e2e2e2;
font-size: 18pt;
transition: all 0.3s;
}
<nav>
<ul>
<li><a href="#">Index</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Guides</a></li>
<li><a href="#">Tactics</a></li>
<li><a href="#">Garison</a></li>
<li><a href="professions.html">Professions</a></li>
</ul>
</nav>
line-height
нужной величины