Das Pseudo-Element ::first-line

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!

first-line Pseudoelement

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.

first-line Pseudoelement

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: http://www.w3.org/…/C…/Selectors/pseudo-elements/:first-line

W3C CSS3 Selectors module: http://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.

::first-letter Pseudoelement

Achtung: Um den ersten Buchstaben eines Elements im Code anzusprechen, bedarf es nicht mehr zwangsläufig einem -Tag. Möglich macht dies das Pseudo-Element „::first-letter“. Obwohl dem DOM kein Element hinzugefügt wird, wird der angesprochene erste Buchstabe in einem -Tag eingeschlossen. Wie das Pseudoelement „::first-line“, wird auch „::first-letter“ häufig dazu verwendet, um typografische Details zu Textelementen, wie sog. „Drop Caps“ oder Initialen hinzuzufügen.

Firstletter Pseudoelement

Oft benutzt wird dieses ausgezeichnete Pseudoelement natürlich von Voll Web Design. Mehr dazu gibt es bei www.vollwebdesign.de oder www.vollwebdesign.com.