2 2 13 53 0 0 0

Pseudoelemente

Selektoren, die Pseudoelemente erzeugen, stehen am Ende einer Kette von Selektoren oder sind alleinstehend. Sinnvoll ist, Pseudoelemente an einen Selektor zuhängen, um ihre Wirkung auf diesen Selektor zu beschränken.

::first-line
Mit dem Pseudoelement wird die erste Zeile eines Textes beeinflußt. Eine Zigarette geraucht und tief verinnerlicht: Jetzt bin ungefähr 35 Jahre Werbegestalter, Layouter von mir aus und kann mich nicht erinnern, dass mir sowas jemals untergekommen ist. Ich gehe zum nächsten Punkt:

::first-letter
In Erstzeileneinzug text-intent und Initialen Menü: CSS/05_Anwendung_und_Praxis bereits beschrieben.

::before und ::after
Hier wird etwas vorangestellt oder angehängt. Das wird dann nützlich, wenn damit in Aufzählungen oder Tabellen z.B. Schreibarbeit gespart werden kann. Damit beschäftigt man sich einmal, weil Faulheit der Initiator des Lernens ist.
Und sogleich setze ich das Pseudoelement mit dem Selektoren <q> ein,
weil: wer von Typografie keine Ahnung hat, kennt auch die typografischen Anführungszeichen nicht!
Der nimmt "genau das"!
Mit der Kodierung content="text/html;charset=iso-8859-1" geht oder ging das noch mit &bdquo; und &ldquo; .
Aber utf-8: Ach du meine Jüte: U+0132 für und U+0147 für - hallo? Im schlimmsten Fall, wenn ich mein Gedächtnis auf irgend einem Zettel in irgend einer Schublade vergessen hatte, musste ich das im Quellcode wie bisher notieren. Aber hier ist die Lösung:

22
23
24
q { color: #9126ff; }
q::before {content: '„'} 
q::after {content: '“'}
40
41
<br />weil: <q>wer von Typografie keine Ahnung hat, 
      kennt auch die typografischen Anführungszeichen nicht!</q>

Hier habe ich wohl ein gutes Beispiele für den Einsatz von Pseudoelementen.

::selection
Es ist möglich, die Vorder- und Hintergrundfarbe individuell zu beeinflussen, wenn ein Text markiert wird.
Ich enthalte mich da mal ganz dezent jeglicher Bewertung. Was sich manche Leute so ausdenken.




Dokument geändert am: 25. Aug. 2016 10:16