a {
position: relative;
padding-bottom: 2px;
text-decoration: none;
}
a:hover::after {
content: "";
position: absolute;
bottom: 2px;
left: 0;
height: 1px;
width: 100%;
background: #444;
background: linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
}Siehe den Pen Gradient Underlines von Chris Coyier (@chriscoyier) auf CodePen.
yohooo
Nicht schlecht!
Gib dem Ganzen noch einen Übergang, dann wird es noch schicker! :)
Genial Mann! Vielen Dank!
Gibt es eine Lösung für Zeilenumbrüche? Wenn mein Link lang genug ist, um auf die nächste Zeile umzubrechen, wird die nächste Zeile nicht unterstrichen.
Ich habe keine Lösung gefunden, um den Gradienten richtig umzubrechen, also musste ich den Zeilenumbruch für den Link deaktivieren.
a {
white-space: nowrap;
}
Für Firefox benötigt man -moz-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
Nicht schlecht, aber es funktioniert nur in Chrome.
Hallo, cooler Trick. Du kannst es in anderen Browsern zum Laufen bringen, indem du herstellerspezifische Eigenschaften hinzufügst.
background: -webkit-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
background: -moz-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
background: -o-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
background: linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
Schöner Trick!!