Ein Zeilenumbruch kann HTML-Elementen hinzugefugt werden, ohne dass ein Zeilenumbruch
verwendet werden muss, indem Pseudoelemente verwendet werden. Pseudo-Elemente werden verwendet, um einen bestimmten Teil eines Elements zu stylen. Hier verwenden wir::after, um ein HTML-Element zu formatieren, um einen Zeilenumbruch hinzuzufugen.
Im obigen Code verwenden wir das Pseudo-Element :: after
fur jedes Inline-Element (dargestellt durch das Span), um einen Wagenrucklauf (dargestellt durch das "a‚") nach der Textzeile des Spans einzufugen. ::after
verfugt in diesem Fall uber eine Inhaltseigenschaft und eine Leerraumeigenschaft, die wir verwenden können.
Die ‘Inhalt’ -Eigenschaft beschreibt das Material, das in die Spanne injiziert werden soll. Die white-space-Eigenschaft sagt uns, ob wir den Whitespace beibehalten sollen. Wenn Sie diese spezielle Eigenschaft auslassen, wird die Inline-Block-Eigenschaft des Spans nicht beeinträchtigt. Daher mussen wir diese spezielle Eigenschaft hinzufugen, um das zu uberschreiben.
Wenn Sie immer mehr mit Stil und Layout herumspielen, werden Sie wahrscheinlich feststellen, dass die obige Lösung nicht unbedingt die beste Lösung ist. Wenn Sie Fullungen jeglicher Art und auch Hintergrund hinzufugen, werden Sie feststellen, dass diese CSS-Eigenschaften dazu neigen, den Hintergrund zu beeinflussen. Sehen Sie sich das folgende Codebeispiel an, das den Punkt veranschaulicht:
Professor Dumbledore
Professor McGonagall
Professor Snape
Professor Trelawney