Animated Underline Effects on Hover

Im Customizer > General kann eingestellt werden, ob und wann ein Link unterstrichen werden sollen: Always, Never, Always on Hover, Never on Hover. Dort kann auch die Linke-Farbe eingestellt werden.

Sieht noch schicker aus, wenn sich etwas bei Maus-Berührung bewegt. Oder auch, wenn ein Animated-Underline-Effekt on hover nur bei Menu-Items oder dem Text in den Items angewendet wird.

Derartige “Hover” Effekte findet ihr in diesem Beitrag, den Code über Simple-CSS.

Beispiele:

Nav Menu
Text Link
Button:

Button

/* MENU ITEMS Animated Underline Effect */
.main-navigation .main-nav ul li > a::after {
bottom:10px;
  content: "";
  display: block;
  height: 2px;
  left: 0%;
  position: absolute;
  background: var(--accent);
  transition: width 0.2s ease 0s, left 0.1s ease 0s;
  width: 0;
}
.main-navigation .main-nav ul li > a:hover::after, .main-navigation .main-nav ul li[class*="current-menu-"] > a::after{
  width: 100%; 
  left: 0; 
}
.main-navigation .main-nav ul li a {
    padding-left: 0;
    padding-right: 0;
    margin-left: 20px;
    margin-right: 20px;
    position: relative;
}

Text Links

Text-Links kann der Effekt folgendermaßen hinzugefügt werden. Barrierefrei wäre es übrigens, Text-Links immer mit einem Unterstrich zu kennzeichnen.

/* Animated Underline Effect on Hover for Text-Links */
a:not(.main-navigation li a) {
background-image: linear-gradient(currentColor, currentColor);
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% 2px;
transition: background-size .4s;
}
a:not(.main-navigation li a):hover, 
a:not(.main-navigation li a):focus  {
background-size: 100% 2px;
}

Text Links mit Underline-Schatteneffekt

Von Mike Oliver stammt dieser nette Effekt:

.entry-content a {
	box-shadow: 0px -1px 0px rgba(255,255,255,0.4) inset;
	padding-bottom: 2px;
	transition: all 0.4s ease 0s;
}

.entry-content a:hover {
	box-shadow: 0px -10px 0px rgba(255,255,255,0.2) inset;
}

Navigation Menu

Text Links

Text Links mit Underline-Schatteneffekt