Web-Entwicklung ist eine faszinierende Welt voller Möglichkeiten für Kreativität und Selbstverwirklichung. Wenn Sie Ihre Webseite mit auffälligen Linien verschönern möchten, informieren wir Sie über eine einfache und effektive Methode, die CSS before verwendet.
CSS before ist ein Pseudoelement, mit dem Sie Inhalte vor dem angegebenen Element hinzufügen können. Mit ihm können Sie eine Linie, einen Pfeil, eine Form und andere dekorative Elemente hinzufügen, ohne zusätzliche Bilder zu verwenden.
Das Erstellen einer Linie mit CSS before ist ein einfacher Prozess. Sie benötigen nur ein paar Zeilen Code und ein wenig kreativen Ansatz. Lassen Sie uns die Schritte durchgehen, die Ihnen helfen, eine Linie in CSS before zu zeichnen und Ihre Webseite auf einzigartige Weise zu verschönern.
CSS lernen before
Mit dem :before-Selektor in CSS können Sie Inhalte oder Stile vor dem Inhalt des ausgewählten Elements hinzufügen.
Dieser Selektor ist ein Pseudoelement, was bedeutet, dass wir Stile auf ein Element anwenden können, das im DOM nicht existiert, sondern einfach mit CSS erstellt wird.
Zu verwenden :before Sie müssen das Element auswählen, auf das Sie die Stile anwenden möchten, und eine neue Regel mit einem Pseudoelement zu seinen CSS-Regeln hinzufügen.
Beispiel für die Verwendung des Selektors :before zum Erstellen einer Linie:
.element:before
Im obigen Beispiel erstellen wir ein leeres Element mithilfe der content-Eigenschaft: "", dann legen wir die Anzeige des Blocks fest ( display: block ), legen die Breite auf 100% und die Höhe auf 1 Pixel fest. Außerdem legen wir die Hintergrundfarbe auf Schwarz fest.
Nachdem diese Stile auf ein Element mit einer Klasse angewendet wurden .element , wir sehen die erstellte Linie vor dem Inhalt dieses Elements.
Linien in CSS before: Grundprinzipien
Um eine Linie in CSS before zu erstellen, müssen Sie die folgenden Grundlagen anwenden:
- Setzen Sie die Positionierung des übergeordneten Elements auf einen Wert relative oder absolute. Dadurch wird der Startpunkt des Pseudoelements innerhalb des übergeordneten Elements definiert.
- Legen Sie die Breite und Höhe des Pseudoelements mithilfe von Eigenschaften fest width und height. Die Breite und Höhe bestimmen die Dicke und Länge der Linie entsprechend.
- Festlegen der Linienfarbe mithilfe der Eigenschaft background-color. Hier können Sie eine beliebige Farbe im HEX-, RGB- oder Farbnamen-Format verwenden.
- Setzen Sie die Positionierung des Pseudoelements auf einen Wert absolute. Dadurch wird das Element relativ zu seinem übergeordneten Element positioniert.
- Positionierungskoordinaten des Pseudoelements mithilfe von Eigenschaften festlegen top, right, bottom oder left. Zum Beispiel mit Eigenschaften top und left sie können den Anfangspunkt einer Linie definieren.
Nach der Anwendung dieser Richtlinien erstellt die Webseite eine Linie vor dem Inhalt des Elements, fügt Ihrer Seite einen Design-Akzent hinzu und verbessert ihren visuellen Eindruck.
Schritt 1: Erstellen eines Containers
Um dies zu tun, erstellen Sie ein Blockelement, zum Beispiel oder
, und geben Sie die entsprechende Klasse oder ID an.
In diesem Beispiel haben wir einen Container mit der Klasse "container" erstellt, die unsere Linie enthält.
Jetzt sind wir bereit, mit dem nächsten Schritt fortzufahren und Stile hinzuzufügen, um eine Linie mit CSS before zu erstellen.
Schritt 2: Einrichten des Pseudoelements before
Nachdem wir das Element erstellt haben, dem wir eine Linie hinzufügen möchten, können wir mit der Konfiguration des Pseudoelements before beginnen.
Um eine Linie mit dem before-Pseudoelement zu zeichnen, müssen wir die folgenden Eigenschaften angeben:
| Eigenschaft | Bedeutung | Die Beschreibung |
|---|---|---|
| content | '' | Legt den Inhalt des before-Pseudoelements fest. In diesem Fall möchten wir keinen Text hinzufügen, daher wird der Wert durch eine leere Zeichenfolge festgelegt. |
| display | block | Legt den Anzeigentyp des Pseudoelements before fest. Wir möchten, dass die Linie als Blockelement angezeigt wird, so dass sie die gesamte Breite des übergeordneten Elements einnimmt. |
| width | 100% | Legt die Breite des Pseudoelements before fest. Wenn Sie den Wert auf 100% festlegen, wird die gesamte verfügbare Breite des übergeordneten Elements durch die Linie belegt. |
| border-bottom | 2px solid black | Legt den Stil, die Dicke und die Farbe des unteren Randes des before-Pseudoelements fest. Hier haben wir den Wert 2px für die Linienstärke, solid für den Stil und schwarz für den Rahmen festgelegt. |
Nachdem wir das before-Pseudoelement konfiguriert haben, sollte die Linie innerhalb des übergeordneten Elements angezeigt werden. Um es jedoch zu sehen, müssen wir eine ausreichend hohe Höhe des übergeordneten Elements festlegen, damit die Linie sichtbar wird.
Sie können es auch mögen
Gesellschaft von Freunden: so erstellen und genießen Sie gemeinsame Spaziergänge
Freunde sind eines der wichtigsten und wertvollsten Dinge in unserem Leben. Wir lernen, ihnen zu vertrauen, teilen Freude und Trauer mit ihnen, verbringen viel miteinander.
Detaillierte Meisterklasse - Wie zeichne ich Lilien in Etappen mit Öl für Anfänger
Ölgemälde ist eine erstaunliche Kunst, mit der Sie schöne Leinwände mit Ölfarben erstellen können. Einer der beliebtesten.
Was zu tun ist, wenn der geräucherte Fisch mit Schimmel bedeckt ist - Tipps zum Retten und Verwenden
Geräucherter Fisch ist eine beliebte und schmackhafte Delikatesse, die viele gerne genießen. Jedoch, manchmal kann eine unangenehme Situation auftreten, wenn.
Münzen- und Banknoten-Magazin: Sind Münzen echt?
Münzen und Banknoten sind eines der beliebtesten Sammlerstücke. Unter der großen Anzahl von Angeboten auf dem Markt ist es jedoch nicht möglich.
- Feedback
- Nutzungsbedingungen
- Datenschutz
