<ul class="snip1135">  <li class="current"><a href="#" data-hover="Home">Home</a></li>  <li><a href="#" data-hover="About Us">About Us</a></li>  <li><a href="#" data-hover="Blog">Blog</a></li>  <li><a href="#" data-hover="Services">Services</a></li>  <li><a href="#" data-hover="Products">Products</a></li>  <li><a href="#" data-hover="Contact">Contact</a></li></ul>

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);.snip1135 {  font-family: 'Raleway', Arial, sans-serif;  text-align: center;  text-transform: uppercase;  font-weight: 500;}.snip1135 * {  box-sizing: border-box;}.snip1135 li {  display: inline-block;  list-style: outside none none;  margin: 0 1.5em;  padding: 0;}.snip1135 a {  padding: 0.5em 0;  color: rgba(255, 255, 255, 0.5);  position: relative;  letter-spacing: 1px;  text-decoration: none;}.snip1135 a:before,.snip1135 a:after {  position: absolute;  -webkit-transition: all 0.35s ease;  transition: all 0.35s ease;}.snip1135 a:before {  bottom: 0;  display: block;  height: 3px;  width: 0%;  content: "";  background-color: #2980b9;}.snip1135 a:after {  left: 0;  top: 0;  padding: 0.5em 0;  position: absolute;  content: attr(data-hover);  color: #ffffff;  white-space: nowrap;  max-width: 0%;  overflow: hidden;}.snip1135 a:hover:before,.snip1135 .current a:before {  opacity: 1;  width: 100%;}.snip1135 a:hover:after,.snip1135 .current a:after {  max-width: 100%;}/* Demo purposes only */html {  height: 100%;}body {  background-color: #212121;  display: flex;  justify-content: center;  align-items: center;  flex-flow: wrap;  margin: 0;  height: 100%;}