Tipps und Tricks: Unterstreichungen mal anders
Mit Unterstreichungen sollte man ja vorsichtig sein, da sie in der Regel für Hyperlinks vorgesehen sind. Es sei denn, sie unterscheiden sich von den üblichen Unterstreichungen, wie die folgenden Beispiele:
- Dieser Text enthält Worte mit farbigen Unterstreichungen
- Dieser Text enthält Worte mit dicken Unterstreichungen
- Dieser Text enthält Worte mit gestrichelten Unterstreichungen
,
,
,
,
<ul style="list-style-type:disc"> <li> Dieser Text enthält Worte mit farbigen <span style="border-bottom:1px solid #ff0000;"> Unterstreichungen</span> </li> <li> Dieser Text enthält Worte mit dicken <span style="border-bottom:3px solid #00ff00;"> Unterstreichungen</span> </li> <li> Dieser Text enthält Worte mit gestrichelten <span style="border-bottom:1px dashed #0000ff;"> Unterstreichungen</span> </li> </ul>
Unterstreichung kannst du mit einem Rahmen simulieren. Die border-bottom-Eigenschaft legt für einen Element einen unteren Rahmen fest. Setze das Wort, dass unterstrichen werden soll, in ein <span>-Tag und lege mit style die Rahmeneigenschaften fest. Eine Vielfalt von Möglichkeiten, wie Farben, Rahmendicke und unterschiedliche Rahmenarten sollten den Ideen eines Webdesigners wenige Grenzen setzen.
Hier findest du weitere Informationen zu:
Rahmen unten (border-bottom)
Rahmenart (border-style)
Rahmendicke (border-width)
Farben
<span>
style
Browser
Browser wie der IE 5.0, die diese Technik nicht kennen, zeigen einfach keinen Rahmen an. Du kannst dies als zusätzliches Feature trotzdem einsetzen.