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 Pseudoelement :after und :before sind nicht anklickbar.
Die Pseudoelement :after und :before sind Inline Elemente.

Ich bin eine langweilige Text Box, eine Platzhalterbox.
.box:after {
    content:'ich stehe nach dem Text :after';
    border: 1px solid #f67;
}
.box:before {
    content:'ich komme zuerst :before';
    background: #D1F523;
    }

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.

Ich bin eine langweilige Text Box, eine Platzhalterbox.
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.