CSS-Tutorial – per CSS Text unterstreichen und durchstreichen
text-decoration
Heute möchte ich Ihnen zeigen, wie man per CSS einen Text durchstreichen, unterstreichen und überstreichen 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. Aber nicht im internet Explorer. Denn der Internet Explorer kennt den Wert blink nicht.</span><br>
</body>
</html>