Pseudoelement :after und :before

Die Pseudoelement :after und :before sind virtuelle Elemente die vielseitig einsatzbar sind. Als unsichtbares Element mit clear Funktion nach einem float Element, oder als sichtbares Layoutelement. Pseudoelement :after und :before fügen ein Element vor oder nach dem Inhalt im Element ein. Mit dem Atribut content wird Text augegeben. Zum Beispiel Anführungs- und Schlusszeichen bei einem Zitat. Die URL eines Links, kann mit :after für die Printversion ausgegeben werden.

Die Pseudoelemente :after und :before sind nicht anklickbar.
Die Pseudoelemente :after und :before sind Inline Elemente.
Die Pseudoelemente :after und :before brauchen immer ein Attribut content: " " , sonst werden sie nicht dargestellt.

.box:after {
    content:'ich stehe nach dem Text :after';
    border: 1px solid #f67;
}
.box:before {
    content:'ich komme zuerst :before';
    background: #D1F523;
    }

Print Links a:after

Damit ein Link auch Ausgedruck Sinn macht setzt man mit den Pseudo-Element :after und der Eigenschaft content: die komplete URL des Hyperlins neben den Verweis.

a:after  { 
color: #000000;
content: " * Link " attr(href) "* ";
}

Zitat

Mit blockquote:after, blockquote:before werden Anführungs- und Schlusszeichen, vor und nach dem Zitat eingefügt.

blockquote:after, blockquote:before  { 
color: #ff6677;
content: " ' ";
font-size:30px;
}

Clear mit dem Element :after

Es ist die einfachste Art ein fliessendes (float) Element mit einen clear aufzuheben, wenn der clear auf ein unsichtbares :after Element zu gesetzten wird. Dies hat zudem den Vorteil, dass keine zusätzlichen HTML Elemente für Layoutzwecke gelden werden müssen.

header:after {
    height: 0;
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
}

Eine schöne Art float aufzuheben ohne einen clear einzusetzten ist bei quirksmode beschrieben.

Kombinationen :last-child mit :after

Der Pseudoselektor :last-child wählt das letzte Element einer Gruppe oder eines Bereiches.
Im folgenden Beispiel werden die Listenpunkte ( li ) mit der Anweisung display:inline; auf eine Linie gesetzt. Die Definition li:after (siehe auch CSS3Pseudoelemente) setzt neben jedes Listenelement einen /Slasch. Nach den letzten Listenpunkt soll kein /Slasch angezeigt werden. Mit li:last-child wird das letzte Listenelement angesprochen, li:last-child:after, ist der Breich nach dem letzen Listenelement.

• House
• Weater
• Contact
• Samples

HTML

 <ul class="countbox">
   <li>House</li>
   <li>Weater</li>
   <li>Contact</li>
   <li>Samples</li>
 </ul>

CSS

.countbox li {
	color: #999;
	display:inline;
	}

.countbox li:after {
	padding: 0 3px 0 5px;
	content: '/';
	color: #999;
	}
.countbox li:last-child:after {
	content: '';
	padding: 0;
	}