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 {
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!
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