CSS - Animierte Unterstreichung

Ich bin ein Hyperlink, unterstreiche mich!

Ich bin ein Hyperlink, unterstreiche mich!

Ich bin ein Hyperlink, unterstreiche mich!


<style>

.
hover-underline-animation {
  
displayinline-block;
  
positionrelative;
  
color#0087ca;
  
text-decorationNone;
  
font-size1rem;
}

.
hover-underline-animation:after {
  
content'';
  
positionabsolute;
  
width100%;
  
transformscaleX(0);
  
height2px;
  
bottom0;
  
left0;
  
backgroundlinear-gradient(to rightredorangeyellowgreenblueindigoviolet);
  
transform-originbottom right;
  
transitiontransform 0.25s ease-out;
}

.
hover-underline-animation:hover:after {
  
transformscaleX(1);
  
transform-originbottom left;
}
</
style>

<
p>
 <
a href="#" class="hover-underline-animation">Ich bin ein Hyperlinkunterstreiche mich!</a>
</
p>

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

Beispiel 2

Ich bin ein Hyperlink, überstreiche mich!

Ich bin ein Hyperlink, überstreiche mich!

Ich bin ein Hyperlink, überstreiche mich!

Beispiel 3

Ich bin ein Hyperlink, unterstreiche mich!

Ich bin ein Hyperlink, unterstreiche mich!

Ich bin ein Hyperlink, unterstreiche mich!

Beispiel 4

Ich bin ein Hyperlink, hinterstreiche mich!

Ich bin ein Hyperlink, hinterstreiche mich!

Ich bin ein Hyperlink, hinterstreiche mich!

Bausteine  Alle Anzeigen

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

<q> Logische Auszeichnung

CSS - Regenbogen Text

PHP - Zufallsbanner mit PHP

JavaScript - Zeichenkontrolle

MySQL - Das Datum und die Uhrzeit der letzten 30 Minuten anzeigen