Как сделать линии под меню, которые будут отьезжать от центра к бокам?

Question

[klaus hayssler]

www.templatemonster.com/demo/58881.html
В этом шаблоне отезжают от центра линии под меню, как мне сделать такое же? заранее огромное спасибо.

Answer 1

[Astrohas]

a:after{
				
				display: block;
				 content: "";
				transition: all .5s;
				width: 0%	;
				margin: auto;

			}
				a:hover:after{
					width: 100%;
				margin-top: 2px;
				 
				 height: 1px;
				 background-color: orange;
				}

Answer 2

[Дмитрий Ким]

Через псевдоэлемент :after, который позиционируется по центру относительно пункта меню, с размером от 0 до 100% по событию hover с использованием трансформаций с задержкой.

Answer 3

[denny911]

a{
vertical-align: middle;
}
a:before {
content: "";
position: absolute;
left: 50%;
right: 50%;
bottom: 0;
background: #2098D1;
height: 4px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}