изменить ширину границы при зависании

Question

У меня есть список ссылок, и я хочу, чтобы визуальный эффект границы внизу или в верхней части ссылки изменил ее ширину при наведении. Я пытался это сделать, но ширина границы меняется, а текст перемещается вверх и вниз.

Я хочу, чтобы текст фиксировался и изменилась ширина рамки за текстом!

<ul> 
    <li> 
     <a href="#"><div class="first">first</div></a> 
    </li> 
    <li> 
     <a href="#"><div class="second">second</div></a> 
    </li> 
</ul> 

ul { 
    list-style-type:none; 
    background-color:#eee; 
    height:30px; 
} 
ul li { 
    display:inline-block; 
    margin-right: 5px; 
    height:30px; 
} 
div { 
    height:30px; 
    line-height:30px; 
} 
div.first { 
    border-bottom-color: #aaa; 
    border-bottom-width: 2px; 
    border-bottom-style: solid; 
    transition: border 1s ease; 
} 
div.second { 
    border-top-color: #aaa; 
    border-top-width: 2px; 
    border-top-style: solid; 
    transition: border 1s ease; 
} 
div:hover { 
    border-width:30px; 
} 

Демо: JSFiddle

Answer 1

ок я установил его, добавляя высоту в DIV вместо границы, а также увеличить высоту на парении и вот пример на fiddle

a div { 
    background-color:#333; 
    height:2px; 
    line-height:30px; 
    transition: height 0.3s ease; 
} 
a div:hover { 
    height:30px; 
} 

Спасибо всем за помощь

Answer 2

То, что вы хотите, не представляется возможным, так как сама граница занимает пространство в документе, является частью блочной модели поэтому высота принимается во внимание. Если вы хотите, чтобы изменения в высоте не влияли на остальную часть документа, вы должны удалить элемент из обычного потока документов.

Я хотел бы предложить вам создать поддельную границу с использованием высоты на псевдо-элементе и абсолютно позиционировать его от родительского элемента, например:

.first, 
.second { 
height:30px; 
line-height:30px; 
position: relative; 
} 

.first:after, 
.second:before{ 
background: #aaa; 
height: 2px; 
width: 100%; 
position: absolute; 
content: ""; 
display: inline-block; 
left: 0; 
} 

.first:after { 
    top: 100%; 
} 

.second:before { 
    top: 0; 
} 

.first:hover:after, 
.second:hover:before { 
    height:30px; 
} 

Вот обновление вашего Fiddle:

http://jsfiddle.net/jkaL3a6m/

Другой вариант - использовать свойство box-shadow вместо границы, чтобы создать фальшивую «границу».

Answer 3

Вот fiidle:

http://jsfiddle.net/ym7tynws/2/

Все, что вам нужно сделать сейчас, это работа по z-index на второй вкладке.

CSS:

.nav { 
    list-style:none; 
    width:200px; 
} 
.nav li { 
    margin:0; 
    text-align:center; 
    width:50%; 
    display:block; 
    float:left; 
    position:relative; 
} 
.nav li a { 
    position:relative; 
    display:block; 
    padding:0; 
    cursor:pointer; 
} 
a .menu-link { 
    background-color:#eee; 
    height:30px; 
    line-height:30px; 
    border-bottom-style:solid; 
    border-bottom-width:2px; 
    border-bottom-color:#333; 
    transition: border 0.3s ease; 
} 
a div:hover { 
    border-bottom-width:30px; 
} 

.second { 

    height:30px; 
    line-height:30px; 
    position: relative; 
    background-color:#eee; 
    transition: height 0.3s ease; 
} 

.second:before{ 
    background: #333; 
    height: 2px; 
    width: 100%; 
    position: absolute; 
    content: ""; 
    display: inline-block; 
    left: 0; 
} 

.second:before { 
    top: 0; 
} 

.second:hover:before { 
    transition: height 0.3s ease; 
    height:30px; 

} 

HTML:

<ul class="nav"> 
<li> 
    <a><div class="menu-link">About</div></a> 
</li> 
<li> 
    <a><div class="second">Contact Us</div></a> 
</li>