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.

<table> Tabelle

CSS - Ladeanimation ohne Bild-Grafik

PHP - Arithmetische Operatoren

JavaScript - Anzahl der Wörter als Fortschrittsbalken anzeigen

MySQL - Höchstwert einer Spalte ermitteln

Seriöses Design
Durch das Design entscheidet der Besucher über die Seriosität und Qualität der Seite. Mit einem guten Design haben Sie schnell Pluspunkte bei den Besuchern erzielt, ebenso können Sie damit Ihre Besucher verärgern, und sie somit zu keinem weiteren Besuch bewegen können.