Webdesigner stehen ständig vor der Herausforderung, eine attraktive und funktionale Benutzeroberfläche für Benutzer zu schaffen. Eine Möglichkeit, dieses Ziel zu erreichen, besteht darin, horizontale Linien in CSS zu verwenden. Horizontale Linien können eine visuelle Struktur und eine Trennung zwischen verschiedenen Elementen einer Webseite hinzufügen.
Es gibt einige einfache Möglichkeiten, eine horizontale Linie zu CSS hinzuzufügen. Zuerst können Sie die Eigenschaft verwenden border-bottom für ein Element, das eine horizontale Linie benötigt. Wenn Sie beispielsweise eine Linie unter der Überschrift hinzufügen möchten, können Sie das folgende CSS anwenden:
h2 border-bottom: 1px solid black;
>
Dieser Code wendet eine schwarze horizontale Linie unter jedem Titel der zweiten Ebene an ( ). Sie können den Linienstil anpassen, indem Sie die Eigenschaftswerte ändern border-bottom. Sie können beispielsweise eine andere Farbe, Dicke oder Linientyp verwenden, indem Sie die entsprechenden Werte hinzufügen.
Eine andere Möglichkeit, eine horizontale Linie hinzuzufügen, besteht darin, ein Pseudoelement zu verwenden ::after. Mit diesem Pseudo-Element können Sie Inhalte nach dem Inhalt des ausgewählten Elements hinzufügen. Um beispielsweise eine horizontale Linie unter einem Element zu erstellen . Sie können das folgende CSS verwenden:
p::after content: "";
display: block;
border-bottom: 1px solid black;
>
In diesem Beispiel erstellen wir mit einer Eigenschaft einen leeren Inhalt content und legen Sie die Anzeige dafür fest block. Dann wenden wir eine horizontale schwarze Linie mit der Eigenschaft auf dieses Pseudoelement an border-bottom.
Wie füge ich eine horizontale Linie zu CSS hinzu
1. Verwenden des Pseudoelements ::after:
.my-line .my-line::after2. Durch die Verwendung der Elementgrenze:
.my-line3. Verwenden des Pseudoelements ::before:
Wählen Sie die für Sie geeignete Methode aus und fügen Sie Ihren Webseiten mithilfe von CSS horizontale Linien hinzu.
Verwenden einer Grenze
Sie können den folgenden Code verwenden, um eine einfache horizontale Linie zu erstellen:
Dieser Code erstellt eine horizontale Linie mit einer schwarzen Farbe, einer Breite von 1 Pixel und einem festen Stil.
Sie können den Rahmen auch an Ihre Bedürfnisse anpassen, indem Sie die Werte der Eigenschaften border-color, border-width und border-style ändern. Wenn Sie beispielsweise eine gepunktete horizontale Linie erstellen möchten, können Sie den Wert border-style: dotted festlegen;
Grenzen können auf alle HTML-Elemente angewendet werden, einschließlich Tabellen. Betrachten wir ein Beispiel für die Verwendung eines Rahmens in einer Tabelle:
In diesem Beispiel wird den horizontalen Linien ein durchgezogener Linienstil mit schwarzer Farbe zugewiesen. Sie werden den td-Elementen mithilfe der border-bottom-Eigenschaft hinzugefügt.
Die Verwendung eines Rahmens ist eine einfache und effektive Möglichkeit, CSS eine horizontale Linie hinzuzufügen. Mit dieser Methode können Sie die Linie nach Ihren Wünschen anpassen, indem Sie die Einstellungen für die Breite, den Stil und die Farbe des Rahmens ändern und sie auf verschiedene HTML-Elemente anwenden.
Verwenden des Pseudoelements before
Um eine horizontale Linie mit dem Pseudo-Element ::before zu erstellen, verwenden Sie den folgenden CSS-Code:
In diesem Code erstellen wir mit der content: -Eigenschaft leeren Inhalt. " Legen Sie dann die Anzeige als Blockelement mithilfe der Eigenschaft display: block fest. Als nächstes legen Sie den Linienrandstil mithilfe der border-top-Eigenschaft fest. Schließlich legen Sie mit der Eigenschaft margin-bottom den Einzug vom unteren Rand der Linie fest.
Nachdem dieser Code angewendet wurde, fügt das Pseudo-Element ::before vor jedem ausgewählten Element eine horizontale Linie hinzu. Sie können auch die Farbe, Dicke und den Stil der Linienrandlinie anpassen, indem Sie die Werte in der border-top-Eigenschaft ändern.
Die Verwendung des Pseudoelements ::before ist eine bequeme und einfache Möglichkeit, dem CSS eine horizontale Linie hinzuzufügen, wodurch die verschiedenen Inhaltselemente auf der Seite getrennt werden.
Verwenden eines Hintergrundbildes
Dazu können Sie die Eigenschaft verwenden background und geben Sie einen Link zum gewünschten Bild an.
Wenn Sie beispielsweise ein Bild einer horizontalen Linie haben, können Sie es als Hintergrund eines Elements hinzufügen, indem Sie die Eigenschaft festlegen background-image und den Pfad zur Bilddatei angeben:
Beispielcode:
.horizontal-line background-image: url("path/to/line-image.png");
height: 1px;
background-position: center;
background-repeat: no-repeat;
>
In diesem Beispiel wird eine Klasse mit dem Namen erstellt horizontal-line und das Hintergrundbild wird mit der Eigenschaft angewendet background-image. Die Höhe des Elements wird auf 1 Pixel festgelegt, und die Hintergrundposition wird mithilfe der Eigenschaft in der Mitte des Elements festgelegt background-position. Sie können auch angeben, dass das Bild nicht horizontal oder vertikal wiederholt werden soll, indem Sie die Eigenschaft verwenden background-repeat.
Um diese Klasse zu verwenden, fügen Sie sie einfach dem gewünschten HTML-Element hinzu:
Anwendungsbeispiel:
Auf diese Weise kann das Hintergrundbild verwendet werden, um eine horizontale Linie in CSS zu erstellen. Mit dieser Methode können Sie jedes Bild als Linie verwenden und sein Aussehen mit CSS leicht anpassen.
Verwenden des Titelleisten
Häufig werden auf Webseiten vertikale Titelleisten verwendet, um Inhalte in Abschnitten zu kombinieren. Überschriftenstreifen helfen Ihnen, Informationen zu organisieren und das Erscheinungsbild einer Webseite zu verbessern.
| Überschrift |
In diesem Beispiel wird eine Titelleiste mit dem Text "Titel" und einer horizontalen Linie darunter erstellt.
Mit CSS-Stilen können Sie das Erscheinungsbild des Titelleisten anpassen, indem Sie die Farbe, Breite und den Linienstil festlegen.
Verwenden des Pseudoelements after
Pseudo-Element :after fügt nach dem Inhalt des ausgewählten Elements zusätzlichen Inhalt hinzu. Mithilfe von Stilen können Sie die Höhe, Farbe und andere Eigenschaften einer horizontalen Linie festlegen.
Im Folgenden finden Sie ein Beispiel für die Verwendung eines Pseudoelements :after, um einem Element eine horizontale Linie hinzuzufügen:
.table-container .table-container:after
| Zelle 1 |
| Zelle 2 |
| Zelle 3 |
In diesem Beispiel wird ein Container für eine Tabelle mit der table-container-Klasse erstellt. Das Pseudo-Element :after wird dem Container hinzugefügt und hat eine absolute Positionierung. Mit den angegebenen Stilen können Sie eine Linie in der Mitte des Containers platzieren und Höhe und Farbe festlegen.
Also das Pseudoelement :after ist ein praktisches Werkzeug, um Elementen in CSS eine horizontale Linie hinzuzufügen.
