Obramowanie / cień czcionki

pytanie zadane 24 maja 2017 w HTML i CSS przez niezalogowany

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.

2 odpowiedzi

odpowiedź 24 maja 2017 przez zgrybus Pasjonat (24,860 p.)

Śmieszne, bo ja nie widzę u siebie tego białego obramowania. Jaka przeglądarka?

komentarz 24 maja 2017 przez niezalogowany

Google Chrome 58.0.3029.110 (64-bit)

komentarz 24 maja 2017 przez zgrybus Pasjonat (24,860 p.)

Zrób zdjęcie po najechaniu i powiedz gdzie dokładnie jest ten paseczek. ( Dokładnie ta sama przeglądarka )

komentarz 24 maja 2017 przez niezalogowany

Nie "paseczek", a pozostałości białego koloru czcionki, którego ma nie być.

Jak nie widać na obrazku, to można przybliżyć w jakimś mspaincie - wyżej element bez text-shadow, niżej z text-shadow 0px (i dlaczego ten text-shadow cokolwiek zmienia pomimo tego, że ma 0px?).