Wie Unterstreichung unter Link bei Hover verblassen lassen?

-1

Wie kann ich eine Unterstreichung einblenden, wenn ich den Mauszeiger über einen Link wie im folgenden Video halte?Wie Unterstreichung unter Link bei Hover verblassen lassen?

fand ich diese CSS durch die Entwickler-Konsole, aber ich kann nicht herausfinden, wie es funktioniert.

.mainContent p>a:hover::after, .mainContent li>a:hover::after, .mainContent .text a:hover::after, .mainContent p>a:focus::after, .mainContent li>a:focus::after, .mainContent .text a:focus::after { 
    opacity: 1; 
    -webkit-transform: translateY(-2px); 
    -moz-transform: translateY(-2px); 
    transform: translateY(-2px); 
} 
.mainContent p>a::after, .mainContent li>a::after, .mainContent .text a::after { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    width: 100%; 
    height: 1px; 
    background: rgba(226,0,26,1); 
    content: ''; 
    opacity: 0; 
    -webkit-transition: opacity 0.15s,-webkit-transform 0.2s; 
    -moz-transition: opacity 0.15s,-moz-transform 0.2s; 
    transition: opacity 0.15s,transform 0.2s; 
    -webkit-transform: translateY(4px); 
    -moz-transform: translateY(4px); 
    transform: translateY(4px); 
}

HTML

<a href="http://www.google.de" target="_blank">Hallenplan</a>

Wie funktioniert das und gibt es eine noch bessere Möglichkeit?

Quelle

2016-10-27 Black

leider kann man nicht einen Unterstrich auf seine eigene animieren, wie sie auch den Text animieren würde. mit dem CSS, das du zeigst, machen sie ein ': nachher'-Pseudoelement, das eine Linie von der Größe des Ankers ist und verschiebe es nach unten, animiere dann die Deckkraft (und verschiebe es aus irgendeinem Grund nach oben) - wenn du nur Willst du die Deckkraft, entferne alle 'translateY's aus dem Hover – Pete

Um diesen Effekt tun müssen Sie zwei Dinge:

das ein position Attribut a Geben
Animieren seine after Element, indem sie es an der Unterseite durch position: absolute platzieren und dann transform es ing.

Ein möglicher Weg ist:

a { 
 
    position: relative; 
 
    text-decoration: none; 
 
} 
 

 
a:hover::after, a:focus::after { 
 
    opacity: 1; 
 
    transform: translateY(-2px); 
 
} 
 

 
a::after { 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 1px; 
 
    background: black; 
 
    content: ''; 
 
    opacity: 0; 
 
    transition: opacity 0.2s, transform 0.2s; 
 
    transform: translateY(4px); 
 
}

<a href="http://www.stackoverflow.com"> 
 
    StackOverflow 
 
</a>

Quelle

2016-10-27 12:00:37 Neikos

Wie Unterstreichung unter Link bei Hover verblassen lassen?

Antwort

Verwandte Themen