<body>
<div class="container">
<ul>
<li><span>домой</span></li>
<li><span>о нас</span></li>
<li><span>контакты</span></li>
</ul>
</div>
</body>
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300);
body {
display: table;
width: 100%;
height: 100vh;
margin: 0;
background: #333;
font-family: 'Roboto Condensed', sans-serif;
font-size: 20px;
font-weight: 300;
letter-spacing: 5px;
text-transform: uppercase;
color: #fff;
}
.container {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 600px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
padding: 0 20px;
}
span {
position: relative;
display: block;
cursor: pointer;
}
span:before, span:after {
content: '';
position: absolute;
width: 0%;
height: 1px;
top: 50%;
margin-top: -0.5px;
background: #fff;
}
span:before {
left: -2.5px;
}
span:after {
right: 2.5px;
background: #fff;
transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
span:hover:before {
background: #fff;
width: 100%;
transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
span:hover:after {
background: transparent;
width: 100%;
transition: 0s;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.