Как выделить кнопоки меню линией?

Question

[oleja187]

Внимание програмисты. Доброго времени суток! Как легко и просто написать код для выделения кнопок меню? При наведении курсора появляются динамические нижняя и верхняя линияя как это указанно на рисунке. Зарание Благодарю за помощь.
refur.tefox.net

Answer 1

[Максим Люмен]

нужно что бы пункты меню были как на картинке ? c верху и с низу были белые полоски ?

Comments

[oleja187]

Да но это не просто полоски при наведении мышки они появляются из центра)

[Максим Люмен]

oleja187: https://jsfiddle.net/a63tw20a/1/ вот так ?

Answer 2

[Николай]

Учитесь пользоваться консолью:
Обычный стиль:

left: 50%;
right: 50%;
content: "";
position: absolute;
top: 0;
bottom: 0;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
opacity: 0;

При ховере:

left: 0;
right: 0;
width: auto;
opacity: 1;

Обычно все такие штуки вешаются на :before/:after элементы, в веб инспекторе можно при помощи клика на элементе триггерить события типа "hover" и очень легко найти как что-то сделано.