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.