De fem pseudoelementer - til forskel fra pseudoklasser - der er defineret i CSS-standarden er det første bogstav, den første linje, før elementet, efter elementet og brugermarkeret tekst. Elementerne er nævnt i nedenstående tabel.
| Element | CSS | Beskrivelse |
|---|---|---|
| Element::first-letter | CSS3 | Det første bogstav i elementet |
| Element:first-letter | CSS1 | Det første bogstav i elementet |
| Element::first-line | CSS3 | Den første linje i elementet |
| Element:first-line | CSS1 | Den første linje i elementet |
| Element::before | CSS3 | Indsætter indholdet af content-egenskaben før elementet |
| Element:before | CSS2 | Indsætter indholdet af content-egenskaben før elementet |
| Element::after | CSS3 | Indsætter indholdet af content-egenskaben efter elementet |
| Element:after | CSS2 | Indsætter indholdet af content-egenskaben efter elementet |
| Element::selection | CSS3 | Matcher tekst, der er markeret af brugeren |
Browserunderstøttelsen af den sidstnævnte ::selection er overordentligt
ringe, kun Safari-browseren understøtter den delvist.
CSS3-syntaksen indfører ::-pseudoelement-syntaksen for at fremhæve forskellen på pseudoklasser og pseudoelementer. Flertallet af browsere understøtter de fire første pseudoelementer uanset syntaksen.
Jokeren i spillet er som sædvanlig Internet Explorer, der til og med
IE8 ikke understøtter nogen CSS3-pseudoelementer. IE7 understøtter CSS1 syntaksen
for :first-letter og :first-line, mens IE8
yderligere understøtter CSS2.1 syntaksen for
:before og :after.
Første bogstav i overskriften til dette tekstafsnit er formateret med
.initial:first-letter {font-size:200%;color:teal;}
Typografisk set er det ikke smukt. Jeg foretrækker “rigtige”
initialer (eller uncialer som vist er det rigtigt ord). Sådanne beskriver jeg
i min bog Webdesign med stylesheets,
http://www.webdesign101.dk/cssbog/kildekode/figur2403a.html og
http://www.webdesign101.dk/cssbog/kildekode/figur2403b.html.
I dette tekstafsnit er første linje formateret af nedenstående CSS-kode. Jeg har gjort afsnittet lidt smallere end teksten i øvrigt, så det bliver mere tydeligt hvad der sker med henholdsvis første og anden linje, når browservinduet gøres smallere eller bredere.
.indledning:first-line {font-variant:small-caps;}
De to pseudoelementer indsætter indhold hhv. før og efter et element. Syntaksen er:
h3.indled::before {
content: [content:værdi];
display: [display:værdi};
[andre formregler for pseudoelementet};}
Værdien af content kan være følgende: tekststreng, uri (url), counter, attr(attribut-navn), open-quote, close-quote, no-open-quote, no-close-quote.
Overskriften til dette afsnit formateres af følgende formdeklarationer:
h3.indled::before {content: "*** "; color:teal;}
h3.indled::after { content:" " url(/www/res/flueben.png);}
Den første formdeklaration indsætter en tekststreng bestående af tre grønne asterisker foran overskriften. Den anden formdeklaration indsætter en tom tekststreng (for at skabe afstand) og en grafik efter overskriften. Som standard er display-værdien for de indsatte elementer inline. Ønsker du det indsatte hhv. over og under overskriften, skal formdeklarationerne forsynes med reglen display:block.
Jeg har i andre artikler og i mine bøger slået til lyd for brugen af
Element::after { content: attrib(href); }
som en metode til et print stylesheet at sørge for udskriften af den fulde uri efter et link som Float wrapping. Ordene “Float wrapping” siger jo ikke rigtig nogen noget på et stykke papir, men hvis linket formateres med en passende formdeklaration:
div#artikel a.printurl[href]:after {
color:black;
content:" ("attr(href)")";
font-style:italic;}
Ville det få følgende udseende:
Float wrapping.
Det var på en eller anden måde forbigået min opmærksomhed, at fjenden i Treårskrigen ikke var tyskerne, men en anden del af rigets indbyggere, pæne mennesker, der kæmpede for national selvbestemmelse og en fri forfatning.
For en fredericianer, hvis historieopfattelse i nogen grad er præget af begivenhederne i 1849, er ovenstående citat noget af en “Eye Opener”. En sandhed, vi måske nok har kendt, men som er blevet undertrykt af festivitasen hvert eneste år den 5. og 6. juli, hvor så godt som hele byens befolkning fejrer det sejrrige udfald mod "tysken" natten mellem de to datoer.
Nu skal denne side ikke handle om det, men om præsentationen af teksten. HTML-koden til det lille tekststykke er:
<blockquote cite="Søren Mørch: “Den sidste Danmarkshistorie” --> pag. 113. Gyldendal 1996"> <p> Det var på en eller anden måde ... </p> </blockquote>
Og stylesheet koden er:
blockquote {margin:0 2em;}
blockquote p {margin:0;}
blockquote:after {
content:"(" attr(cite) ")";
display:block;
text-align:right; font-style:italic; font-size:90%;
margin:0 auto 0.5em auto;}
Det, der kan siges at mangle i ovenstående er citationstegnene før og efter selve citatet. Som antydet kan content-egenskaben imidlertid forsynes med sådanne citationstegn:
blockquote.citat p:before {content:open-quote;}
blockquote.citat p:after {content:close-quote;}
Herunder ser du resultatet af dette:
Det var på en eller anden måde forbigået min opmærksomhed, at fjenden i Treårskrigen ikke var tyskerne, men en anden del af rigets indbyggere, pæne mennesker, der kæmpede for national selvbestemmelse og en fri forfatning.
Ovenstående CSS-kode, der sætter anførselstegnene, vil sætte dem om alle tekstafsnit i blockquote-elementet. Det derfor være nyttigt at tage en tredje content-egenskab i brug:
blockquote.citat2 p:before { content:open-quote;}
blockquote.citat2 p:after {content:no-close-quote;}
blockquote.citat2 p:last-of-type:after {content:close-quote;}
Det var på en eller anden måde forbigået min opmærksomhed, at fjenden i Treårskrigen ikke var tyskerne, men en anden del af rigets indbyggere, pæne mennesker, der kæmpede for national selvbestemmelse og en fri forfatning.
Det vil ikke være rigtigt at sige, at forholdet er blevet fortiet, for det er det helt bestemt ikke ...
Men alligevel: Ideologisk set er det tyskerne, der er fjenden. ...
Internet Explorer 8 understøtter alle de her nævnte pseudoelementer når du holder dig til CSS2 syntaksen med kun ét kolon. Til gengæld er understøttelsen svag i alle tidligere versioner af denne browser. Det er derfor betænkeligt at anvende disse til at indsætte materiale, der har betydning for forståelse af websidens budskab.
Modsætningsvis kan disse elementer gøre nytte i forhold til visuel fremhævelse af visse tekstelementer, jf. for eksempel grafikken foran dette tekstafsnit.
November 2009