Das Pseudo-Element “::first-line”
In unserer beliebten Facebook Post-Serie „Coole Styles“ möchten wir Dir heute das herausragende Pseudo-Element “::first-line” etwas näher bringen – also schnall Dich an …
::first-line versetzt Dich doch tatsächlich in die Lage den ersten Satz eines Elementes (also z.B. irgendeinen Text, der über mehrere Zeilen geht) ohne einen zusätzlichen Tag oder CSS direkt anzusprechen bzw. zu stylen!
Obwohl auch hier dem DOM kein weiteres Element hinzugefügt wird, ist es so, als ob immer der erste Satz egal wie groß bzw. ob in Desktop-, Mobile- oder Tablet-Ansicht in einen weiteren gestylten Tag, also einen -Tag eingeschlossen wird.
Daher wird auch das Pseudoelement “::first-line” – genauso wie “::first-letter” übrigens – häufig dazu verwendet typografische Details zu Textelementen hinzufügen.
Wer dies ausprobieren möchte, kann sich auf unserem brandneuen Codepen unter https://codepen.io/vollwebdesign/pen/WRzqpY gerne ausgiebig austoben.
Weitere Informationen:
W3C Wiki: https://www.w3.org/…/C…/Selectors/pseudo-elements/:first-line
W3C CSS3 Selectors module: https://www.w3.org/TR/css3-selectors/#first-line
Browser Unterstützung:
Für Internet Explorer 8 und niedriger – aber wer braucht das schon? – darf nur ein einfacher Doppelpunkt, also “:first-line” anstelle von doppelten Doppelpunkt: “::first-line” verwendet werden. Alle anderen Browsern reagieren äußerst entspannt auf die Benutzung dieses Pseudoelements.
Auch dieses unbekannte und trotzdem sehr praktische Pseudoelement wird natürlich von Voll Web Design eingesetzt. Mehr dazu gibt es wie immer unter www.vollwebdesign.de bzw. www.vollwebdesign.com.