CSS – was man mit ::before alles machen kann

CSS – was man mit ::before alles machen kann

Im Zuge eines Kundenprojektes war gefordert, vor jeder <h1>-Überschrift einen / zu setzen, der aber größer als die Überschrift sein sollte und außerhalb des Textflusses, also weiter links als der ganze Text.

Folgende Lösung habe ich dafür gefunden:

h1::before {content:“/    „; font-size: 2.2em; float: left; text-indent: -0.6em;}

Der / kann auch durch ein beliebiges Bild ersetzt werden. der float-Befehl sorgt dafür, dass das Element davor in der Höhe ausgemittelt ist und der text-indent für die Verschiebung aus dem Textfluss heraus.

Eine zweite Anforderung war, dass Aufzählungszeichen rot sind während der Text des Aufzählungspunktes grau sein sollte. Auch hier half der ::before-Befehl:

#li {list-style: none;}
#li:before {content:’\2022′; display: block; position: relative; max-width: 0px; max-height: 0px; left: -10px; top: -0px; color: #b7000b; font-size: 20px;}

Hier wird das Symbol für Aufzählungen zunächst ausgeschaltet um dann durch einen Kreis (\2022) ersetzt zu werden, in der gewünschten Farbe und Größe.

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s