Das Unterstreichen von Text ist eine Möglichkeit, wichtige Informationen hervorzuheben. Es hilft, die Aufmerksamkeit des Lesers zu erregen und den Text ausdrucksvoller zu gestalten. Es gibt viele Möglichkeiten, Text im Internet zu unterstreichen, aber in diesem Artikel werden wir uns ansehen, wie Sie einen Unterstreichen auf einem PC vornehmen können.
Eine der häufigsten Methoden zum Hinzufügen eines Unterstrichs ist die Verwendung eines HTML-Tags . Dieses Tag umrahmt den Text, den Sie unterstreichen möchten, und zeigt ihn mit einer klaren Linie darunter an. Beachten Sie jedoch, dass die Verwendung dieses Tags dazu führen kann, dass der Textstil verwischt wird, und es wird nicht empfohlen, ihn als primäres Mittel zur Auswahl von Text zum Lesen zu verwenden.
Wenn Sie einen Unterstricheffekt erstellen möchten, aber den ursprünglichen Textstil beibehalten möchten, können Sie die Kombination von Tags und die CSS-Eigenschaft text-decoration: underline verwenden. Das Tag hilft Ihnen, einen bestimmten Textabschnitt hervorzuheben, und die Eigenschaft text-decoration: underline erzeugt einen Unterstrich.
Stileigenschaften zum Erstellen eines Unterstrichs
- text-decoration: underline; - dies ist der einfachste Weg, um dem Text einen Unterstrich hinzuzufügen. Sie können diese Eigenschaft auf jedes Element anwenden, das Text enthält, z. B.
oder. Zum Beispiel:
Unterstrichener Text
. - border-bottom: 1px solid; – mit dieser Eigenschaft können Sie einen Unterstrich erstellen, indem Sie einen Rahmen am unteren Rand des Elements verwenden. Sie können diese Unterstreichung an die gewünschten Anforderungen anpassen, indem Sie Werte für Linienstärke, Farbe und Stil festlegen. Zum Beispiel:
Unterstrichener Text
. - box-shadow: 0px -2px 0px 0px black; – diese Eigenschaft erzeugt einen Schatten am unteren Rand des Elements, der den Eindruck eines unterstrichenen Unterstrichs vermittelt. Sie können einen Wert für den horizontalen Versatz, den vertikalen Versatz, die Unschärfe, die Ausbreitung von Schatten und Farbe festlegen. Zum Beispiel:
Unterstrichener Text
.
Beachten Sie, dass diese Stileigenschaften nicht nur auf normalen Text angewendet werden können, sondern auch auf Links, Überschriften, Tabellen und andere Elemente auf einer Webseite. Durch die Kombination dieser Eigenschaften und die Anwendung unter Berücksichtigung des Designs und der Projektanforderungen kann der gewünschte Unterstreichungseffekt erzielt werden.
Verwenden des Pseudoelements ::after, um einen Unterstrich zu erstellen
Wenn Sie einem bestimmten Text auf einer Webseite einen Unterstrich hinzufügen müssen, können Sie das Pseudo-Element ::after zusammen mit der CSS-Eigenschaft content verwenden, um diesen Effekt zu erzeugen. Pseudo-Element ::after ermöglicht es Ihnen, dem ausgewählten HTML-Element zusätzlichen Inhalt hinzuzufügen.
Hier ist ein Beispiel für CSS-Code, der die Verwendung des Pseudoelements ::after veranschaulicht, um einen Unterstrich zu erstellen:
strong::after
In diesem Beispiel verwenden wir das Pseudo-Element ::after für das Tag , um dem ausgewählten Text einen Unterstrich hinzuzufügen. Mit der CSS-Eigenschaft content können Sie den Inhalt eines Pseudoelements angeben, in diesem Fall eine leere Zeichenfolge. Wir legen auch die gewünschten Stile für die Unterstreichung fest, z. B. Farbe, Breite und Abstand vom Text.
Um diesen Effekt auf Ihrer Webseite zu verwenden, fügen Sie einfach eine Klasse oder ID zum gewünschten Tag hinzu und wenden Sie den folgenden CSS-Code an:
strong strong::after
In diesem Beispiel verwenden wir das Absolute-Styling und die Bottom- und Left-Positionierung, um das Pseudoelement zu erzwingen ::after sich am unteren und linken Rand des ausgewählten Textes befinden.
Jetzt wissen Sie, wie Sie das Pseudo-Element ::after verwenden, um einen Unterstrich auf Ihrer Webseite zu erstellen.
Formatieren von Text mithilfe der text-decoration-Eigenschaft
Mit der Text-decoration-Eigenschaft in CSS können Sie Texteffekte hinzufügen, einschließlich Unterstreichung. Diese Eigenschaft kann nützlich sein, wenn Sie verschiedene Stile zum Verknüpfen oder Akzentuieren von Text erstellen.
Um einen Unterstrich auf einem PC zu erstellen, müssen Sie die text-decoration-Eigenschaft auf "underline" setzen. Zum Beispiel:
Текст с нижним подчеркиванием
- Verwenden einer externen CSS-Datei:
/* Внешний CSS-файл */p
Außerdem kann die text-decoration-Eigenschaft andere Werte annehmen, z. B. "none" (kein Unterstrich), "overline" (oberer Unterstrich), "line-through" (durchgestrichener Text) und "blink" (Textflimmern).
Es ist wichtig zu beachten, dass die text-decoration-Eigenschaft nicht immer für alle Elemente funktioniert, z. B. für Header (h1, h2, usw.).) und einige andere Elemente können nicht angewendet werden. In solchen Fällen können Sie andere Eigenschaften oder Selektoren zum Formatieren von Text verwenden.
Verwenden von Bordern zum Erstellen eines Unterstrichs
Mit dieser Eigenschaft können Sie eine Linie hinzufügen, die unter dem Text angezeigt wird und einen Unterstricheffekt erzeugt. Eigenschaftswert border-bottom definiert den Stil, die Farbe und die Größe der Linie. Um beispielsweise einen einfachen Unterstrich zu erstellen, können Sie den folgenden CSS-Code verwenden:
- Wählen Sie das Element aus, für das Sie einen Unterstrich erstellen möchten.
- In einer CSS-Datei oder innerhalb eines Tags
