before

[dkdenz]

Beispielszenario:
Man möchte eine Page mit einem weitläufigen Thema zu "was-weiß-ich" machen.
Da erscheinen dann des öfteren News oder Erklärungen.
Die möchte man besonders hervorheben/kennzeichnen.
Jetzt könnte man natürlich manuell jedesmal ein "Wichtig" davor setzen.
Doch es geht auch anders.
Man hat ja seine Informationen normalerweise in einem Absatz stehen.
Nun hat man in seiner CSS das normale p z.B. so deklariert:

p
{
font-family:Courier, "Courier New", Monospace;
font-size:90%;
font-weight:500;
color:#000;
display:inline;
}

Darunter fügt man noch hinzu:

p:before
{
font-family:Courier, "Courier New", Monospace;
font-size:90%;
font-weight:700;
color:#000;
display:inline;
content:"Wichtig: ";
}

Und schon steht immer vor der eigentlichen Aussage das Wort "Wichtig" mit größerem Font-Weight!
Wenn man das nun mit Klassen (class="wichtig"/p.wichtig) kombiniert,
kann man sich Schreibarbeit ersparen und muß nicht ständig sein Erinnerungsvermögen strapazieren.

Dazu sei aber (leider) erwähnt:
IE spielt da nicht mit, alle anderen (Mozilla1.8A1, Firefox0.8, Opera7.23, Netscape7.0)schon...
...man kann nur hoffen, dass in der Version 7 dieses dann auch möglich ist.

 

[stormwind]

ich glaube das gleiche gibbet auch mit :after, also
p:after
und es hat nix mit dem menschlichen hinterteil zu tun....
dann wird der text dahinter zugefügt. es lassen sich natürlich auch beide sachen kombinieren...

 

[jeko]

Dazu sei aber (leider) erwähnt:
IE spielt da nicht mit, alle anderen (Mozilla1.8A1, Firefox0.8, Opera7.23, Netscape7.0)schon...
...man kann nur hoffen, dass in der Version 7 dieses dann auch möglich ist.

Um die Selektoren before und after auch im IE hinzukriegen, kann man den Hack von Dean Edwards nehmen.
[ URL ] http://dean.edwards.name/IE7/overview/
Zu beachten ist, dass der Hack in Javascript geschrieben wurde, das heisst bei deaktiviertem Javascript zeigt er auch keine Wirkung.

 

[dkdenz]

No Hacks Please

 

[jeko]

Nur eine schlichte Initiative für minder bemittelte Schlaf...äh... Brausetabletten.