Methode: 1. Definieren Sie ein leeres Element; 2. Verwenden Sie „::before“ und content, um eine horizontale Linie einzufügen. Die Syntax lautet „Element::before{content:“——“}“; :after“ und Content fügt einen Pfeil mit der Syntax „Element::after{content:“>“}“ ein.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
CSS zum Implementieren von Pfeilen mit horizontalen Linien
Implementierungsmethode:
Definieren Sie ein leeres Element (z. B. ein Span-Tag, das keinen Inhalt enthält).
Verwenden Sie den ::before-Selektor und das Inhaltsattribut zum Einfügen einer horizontalen Linie
Verwenden Sie ::after Selector und das Inhaltsattribut, um einen Pfeil einzufügen
Implementierungsbeispiel:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
|
Beschreibung: ::before selector und ::after selector
:: Der Vorher-Selektor fügt Inhalte vor dem ausgewählten Element ein.
::after Selector fügt Inhalt nach dem ausgewählten Element ein.
Sowohl der Selektor::before als auch der Selektor::after müssen das Inhaltsattribut verwenden, um den einzufügenden Inhalt anzugeben.
Erweitertes Wissen: Nutzungsszenarien von Inhalten
Die Inhaltsdefinition erwähnte, dass sie in Verbindung mit :before- und :after-Pseudoelementen verwendet wird. :before und :after sind die häufigsten Pseudoelemente und jeder muss mit ihnen vertraut sein.
Eine kurze Einführung in :before und :after:
Werfen wir einen Blick auf die wichtigsten Verwendungsszenarien:
Zeichen einfügen
Durch die Verwendung von Inhalten zum Einfügen von Zeichen wird im Allgemeinen ein Standardwert für ein leeres Element festgelegt, ähnlich dem Platzhalterattribut der Eingabe. Es wird nur angezeigt, wenn das Das Element hat keinen Inhalt. Der Code lautet wie folgt:
1 2 3 4 5 6 7 8 |
|
Der Effekt ist wie folgt:
Hilfselementgenerierung
Der Kernpunkt ist derzeit nicht der durch den Inhalt generierte Inhalt, sondern das Pseudonym Element selbst. Normalerweise stellen wir Inhalte ein Der Eigenschaftswert wird auf eine leere Zeichenfolge gesetzt und anderer CSS-Code wird verwendet, um Hilfselemente zu generieren, grafische Effekte zu erzielen oder ein bestimmtes Layout zu erreichen.
Grafischer Effekt
Verwenden Sie das Pseudoelement ::after, um ein anonymes Ersatzelement einzufügen, setzen Sie den Inhalt auf leer, dieses Element hat keinen Inhalt, und verwenden Sie CSS-Stile, um den gewünschten grafischen Effekt zu erzielen. Der Code lautet wie folgt:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
Der Effekt ist wie folgt:
Löschen Sie den Float.
Löschen Sie den Float, hauptsächlich um das Problem zu lösen, dass die interne Höhe des übergeordneten Elements 0 ist Floating der untergeordneten Elemente. Der Code lautet wie folgt:
1 2 3 4 5 6 7 8 9 10 |
|
Die oben genannten drei sind unverzichtbar:
Löschen Sie den Float, indem Sie ein Element hinzufügen und den BFC berühren, damit sich die Höhe des Elements an die Höhe der Unterbox anpassen kann.
Bildgenerierung
Verwenden Sie die URL-Funktion direkt, um Bilder anzuzeigen. Sie können Bilder vor und nach dem Text hinzufügen und den Text direkt ersetzen.
Das Bild ersetzt direkt den Text. Der Code lautet wie folgt:
1 2 3 4 5 6 7 8 9 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
Verwenden Sie attr, um den Elementattributwert zu erhalten, um den Effekt zu erzielen. Der Code lautet im Allgemeinen wie folgt:
1 2 3 4 5 |
|
Der Effekt ist wie folgt :
(Lernvideo-Sharing:
CSS-Video-Tutorial, Web-Frontend)
Das obige ist der detaillierte Inhalt vonSo implementieren Sie Pfeile mit horizontalen Linien in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!