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>

Share and Enjoy: Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.