No cześć.
Tworzę "sobie" proste menu na stronę WWW i natknąłem się na mały "problem".
Ciężko mi wyjaśnić o co chodzi, ale spróbuję - po najechaniu na element tekst w nim ma zmienić kolor na inny i zrobić to od lewej do prawej strony. I teraz - wszystko działa, ale pozostaje białe, jednopikselowe "obramowanie" po starej czcionce. Problem rozwiązuje dodanie zeropikselowego cienia do "nowego elementu".
Pytanie - skąd się bierze "stare" obramowanie i dlaczego naprawia to text-shadow z 0px wartościami?
Kod: http://codepen.io/tls01/pen/NjobVX
(text-shadow jest zakomentowane; usuńcie komentarz, żeby zobaczyć różnicę)
Lub "lokalnie", w poście:
<body>
<nav class="container navigation">
<ul>
<li><a href="#" data="ELEMENT 1">ELEMENT 1</a></li>
<li><a href="#" data="ELEMENT 2">ELEMENT 2</a></li>
<li><a target="_blank" href="#" data="ELEMENT 3">ELEMENT 3</a></li>
<li><a href="#" data="ELEMENT 4">ELEMENT 4</a>
</ul>
</nav>
</body>
body {
background: black;
background-size: cover;
font-family: 'Open Sans', sans-serif;
}
.container {
width: 1200px;
margin: 0 auto;
}
.navigation {
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin-top: 40px;
}
.navigation > ul {
list-style: none;
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
width: 100%;
margin: 0;
padding: 0;
}
.navigation > ul > li > a {
text-decoration: none;
text-transform: uppercase;
padding: 20px;
position: relative;
color: #FFF;
letter-spacing: 1px;
font-weight: 400;
font-size: 1.1em;
}
.navigation > ul > li > a:before {
content: attr(data);
position: absolute;
overflow: hidden;
white-space: nowrap;
max-width: 0;
color: #39BC54;
border-bottom: 2px solid #39BC54;
/* text-shadow: -0px 0 black, 0 0px black, 0px 0 black, 0 -0px black; */
transition: max-width .2s linear;
}
.navigation > ul > li > a:hover:before {
max-width: 100%;
}
Mam nadzieję, że udało mi się wyjaśnić, o co chodzi.
