Text Dekoration

Die Eigenschaft Textdekoration ist eigentlich selbsterklärend: Sie ermöglicht es Ihnen, Ihren Text auf verschiedene Arten zu dekorieren. Es wird am häufigsten verwendet, um Ihren Text zu unterstreichen:

<div style="text-decoration: underline;">Hello, world!</div>

Es hat jedoch tatsächlich mehrere andere Möglichkeiten. Zum Beispiel können Sie damit einen durchgestrichenen Effekt auf Ihren Text erzeugen:

<div style="text-decoration: line-through;">Hello, world!</div>

Das Coole an der Eigenschaft text-decoration ist, dass Sie mehrere Werte gleichzeitig anwenden können:

<div style="text-decoration: overline underline;">Hello, world!</div>

Versuchen Sie es

Gestatten Sie mir als letztes Beispiel, Ihnen alle möglichen Werte im selben Beispiel mit einer Bonuslinie zu zeigen, die alle gleichzeitig verwendet:

<style type="text/css">
div {
	margin: 30px 0;
}
</style>

<div style="text-decoration: overline;">Hello, world!</div>

<div style="text-decoration: line-through;">Hello, world!</div>

<div style="text-decoration: underline;">Hello, world!</div>

<div style="text-decoration: underline overline line-through;">Hello, world!</div>

Zusammenfassung

Die Textdekorationseigenschaft erleichtert das Hinzufügen von Linien um oder durch Ihren Text. Beachten Sie jedoch, dass es sich nicht um einen Rahmen handelt. Die von der Textdekorationseigenschaft gezogenen Linien haben immer die gleiche Farbe wie der Text selbst. Wenn Sie eine Linie in einer anderen Farbe unter oder über Ihrem Text benötigen, sollten Sie die Rahmeneigenschaften verwenden.