Blog Post - 6. September 2015
Animiertes Underline für Links [CSS3]

Animiertes Underline für Links [CSS3]

Der Underline-Effekt, welcher auf dieser Seite in der Header-Navigation und in der Footer-Navigation im Einsatz ist, lässt sich wie folgt bewerkstelligen:

a display: inline-block position: relative &:hover, &.active &:before visibility: visible !important -webkit-transform: scaleX(1) !important transform: scaleX(1) !important &:before content: "" position: absolute width: 100% height: 2px bottom: 0px left: 0 background-color: #00393d visibility: hidden -webkit-transform: scaleX(0) transform: scaleX(0) -webkit-transition: all 0.3s ease-in-out 0s transition: all 0.3s ease-in-out 0s