<nav class="cl-effect-11" id="cl-effect-11"> <a data-hover="Scintilla" href="#cl-effect-11">Scintilla</a> <a data-hover="Propinquity" href="#cl-effect-11">Propinquity</a> <a data-hover="Harbinger" href="#cl-effect-11">Harbinger</a> </nav></p>

css kód

<style type="text/css">

nav a {

position: relative;

display: inline-block;

margin: 5px 5px;

outline: none;

color: #ccc;

text-decoration: none;

text-transform: uppercase;

letter-spacing: 1px;

font-weight: 400;

text-shadow: 0 0 1px rgba(255,255,255,0.3);

font-size: 1.35em;

}

 

nav a:hover,

nav a:focus {

outline: none;

}

.cl-effect-11 a {

padding: 10px 0;

border-top: 2px solid #ccc;

color: #ccc!important;

text-shadow: none;

} 

 

.cl-effect-11 a::before {

position: absolute;

top: 0;

left: 0;

overflow: hidden;

padding: 10px 0;

max-width: 0;

border-bottom: 2px solid #fff;

color: #000;

content: attr(data-hover);

-webkit-transition: max-width 0.5s;

-moz-transition: max-width 0.5s;

transition: max-width 0.5s;

}

 

.cl-effect-11 a:hover::before,

.cl-effect-11 a:focus::before {

max-width: 100%;

}</style>