CSS - Animierte Unterstreichung

Ich bin ein Hyperlink, unterstreiche mich!


<style>

.hover-underline-animation {

  display: inline-block;

  position: relative;

  color: #0087ca;

  text-decoration: None;

  font-size: 1rem;

}



.hover-underline-animation:after {

  content: '';

  position: absolute;

  width: 100%;

  transform: scaleX(0);

  height: 2px;

  bottom: 0;

  left: 0;

  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);

  transform-origin: bottom right;

  transition: transform 0.25s ease-out;

}



.hover-underline-animation:hover:after {

  transform: scaleX(1);

  transform-origin: bottom left;

}

</style>



<p>

 <a href="#" class="hover-underline-animation">Ich bin ein Hyperlink, unterstreiche mich!</a>

</p>

Gefunden bei: https://www.mobirise-tutorials.com/SuperfoodM5/

Beispiel 2

Ich bin ein Hyperlink, überstreiche mich!

Beispiel 3

Ich bin ein Hyperlink, unterstreiche mich!

Beispiel 4

Ich bin ein Hyperlink, hinterstreiche mich!

Bausteine Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<area> Areal (Verweis-sensitive Grafik)

CSS - Fehleingaben in Formularen mit CSS hervorheben

PHP - X-tägige "NEU"-Markierung von Einträgen

JavaScript - Die aktuelle Seite in der Navigation hervorheben

MySQL - Die Differenz zweier Uhrzeiten ermitteln