CSS-Tutorial – per CSS Text unterstreichen, durchstreichen, überstreichen und blinkend – text-decoration
CSS-Tutorial – per CSS Text unterstreichen, durchstreichen, überstreichen und blinkend
Heute möchte ich Ihnen zeigen, wie man per CSS einen Text durchstreichen, unterstreichen, überstreichen und blinkend anzeigen kann.
Hierzu verwendet man die CSS Eigenschaft text-decoration.
Für text-decoration gibt es fünf mögliche Werte:
- none – Ohne besondere Eigenschaft
- underline – Der Text wird unterstrichen
- overline – Der Text wird überstrichen
- line-through – Der Text wird durchgestrichen
- blink – Der Text blinkt
Hier ein Beispielcode:
Beispielcode HTML:
<html>
<head>
<style type="text/css">
.unterstrichen { text-decoration:underline; }
.ueberstrichen { text-decoration:overline; }
.durchgestrichen { text-decoration:line-through; }
.blinkend { text-decoration:blink; }
</style>
</head>
<body>
Von diesem Text möchte ich folgende Passage in unterstrichen anzeigen lassen:<br>
<span class="unterstrichen">Dieser Text sollte unterstrichen sein</span><br>
<span class="ueberstrichen">Dieser Text sollte überstrichen sein</span><br>
<span class="durchgestrichen">Dieser Text sollte durchgestrichen sein</span><br>
<span class="blinkend">Dieser Text sollte blinken.</span><br>
</body>
</html>
Den Text blinkend darzustellen funktioniert standardmäßig nur im Firefox. Um den Text auch im Chrome oder Internet Explorer blinkend darzustellen müssen wir noch ein paar Zeilen CSS ergänzen:
Beispielcode CSS:
<style type="text/css">
.unterstrichen {
text-decoration:underline;
}
.ueberstrichen {
text-decoration:overline;
}
.durchgestrichen {
text-decoration:line-through;
}
.blinkend {
/* -- text decoration blink funktioniert nur im Firefox */
text-decoration:blink;
/* Für alle anderen Browser brauche wir diesen Code: */
-webkit-animation-name: blinker;
-webkit-animation-duration: 0.6s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-direction: alternate;
}
@-webkit-keyframes blinker {
from {opacity: 1.0;}
to {opacity: 0.0;}
}
</style>
Hier dazu ein live Beispiel. Damit könnt Ihr ein wenig experimentieren:
See the Pen pvyOOG by Andreas Lang (@sphinxflash) on CodePen.
Author: Andreas Lang
Andreas Lang konzentriert sich seit zwei Jahrzehnten auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.
