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.

<aside> Nebeninhalt

CSS - Fehleingaben in Formularen farbig hervorheben

PHP - Datei alle fünf Sekunden aktualisieren

JavaScript - Objekt eine JavaScript-Funktion zuweisen

MySQL - Mit mehreren Begriffen gleichzeitig suchen

Suchfunktion
Zu jeder guten Homepage gehört eine Suchfunktion als Service. Hier können Ihre Besucher, nach Inhalten auf Ihrer Homepage suchen. Kostenlose Suchfunktionen auf Basis von PHP gibt es viele im Web. Bei einigen Suchfunktionen wird eine Liste des gesuchten erstellt, was Ihre Besucher auf Ihrer Homepage gesucht haben.