Content opmaken met :before en :after
Hieronder staat een lijstje met kleuren. Bij sommige staat er een icon voor of achter, bij andere staat er tekst voor of achter, bij weer andere staat er aan beide kanten wat.
- Rood
- Blauw
- Groen
- Oranje
- Geel
- Paars
- Wit
Je kunt dit bereiken door het voor elk plaatje apart te programmeren, maar dat is veel werk. Het kost de browser ook vrij veel moeite om steeds te controleren of het plaatje er al is en het eventueel op te halen.
Het kan ook slimmer, met CSS. Je gebruikt dan de pseudo-klassen :before en :after. De namen van deze pseudo-klassen spreken voor zich. Ze zorgen ervoor dat er 'iets' voor resp. na een HTML-element op het scherm wordt gezet. Dat kan zowel tekst zijn als een plaatje.- Het lijstje met kleuren is opgebouwd met behulp van een ongeordende lijst: <ul>. De list-items <li>
hebben allemaal een verwijzing naar een class. Elk van die klassen zorgt ervor dat:
- Er géén bullet aan het begin van een nieuw item staat:
list-style-type:none - De tekst vet wordt gedrukt:
font-weight:bold - De regelhoogte 40 pixels is:
line-height:40px
- Er géén bullet aan het begin van een nieuw item staat:
- De list-items zelf bevatten alleen de naam van de kleur.
- De plaatjes en de teksten voor en na elk list-item worden geplaatst met behulp van :before en :after, zie de code hier onder.
- De koppeling van de list-items aan :before en/of :after loopt via een class. Dat werkt in de praktijk het gemakkelijkst.
- Als je een plaatje / tekst vóór en àchter een item wilt hebben, noem je zowel de klasse die :before opmaakt, als de klasse die :after opmaakt in het class-attribuut. De volgorde is daarbij niet van belang.
- Opmaak van de list-items staat bij de klassen. De opmaak van de :before- en :after-teksten staat bij de pseudo-klassen.
- Om de plaatjes en teksten een beetje los te maken van het list-item zelf, is 5 pixels padding gebruikt.
- Deze benadering is heel geschikt voor het opmaken van hyperlinks: Een PDF-icon voor een link die een PDF-bestand opent, een MP3-icon voor een link die een geluidsbestand file opent, enz.
- Het is ook mogelijk om de pseudo-class direct aan een element (bijvoorbeeld een paragraph <p>) te koppelen:
p:before { ... (enz.) }. Dit heeft het nadeel dat (in dit geval) al de <p>-tags in het document worden opgemaakt met de :before-regel. Vaak is dat niet handig en werkt een class beter.
Gebruik:
- De CSS-code staat in de <HEAD>.
- De HTML-code staat in de <BODY>, op de plaats waar de nodig is.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<style>
.niets { list-style-type:none; font-weight:bold; line-height:40px }
.demoVoor { list-style-type:none; font-weight:bold; line-height:40px }
.demoVoor:before { content:url(../images/ipad.png); padding-right:5px }
.demoNa { list-style-type:none; font-weight:bold; line-height:40px }
.demoNa:after { content:url(../images/photoshop.png); padding-left:5px }
.tekstVoor { list-style-type:none; font-weight:bold; line-height:40px }
.tekstVoor:before {content:"Dit vindt iedereen mooi:"; color:lime;
background-color:#444; padding-right:5px }
.tekstNa { list-style-type:none; font-weight:bold; line-height:40px }
.tekstNa:after { content:"Speciale aanbieding!"; color:red;
background-color:yellow; padding-left:5px }
</style>
(Zet dit in de <BODY>).
<ul>
<li class="demoVoor">Rood</li>
<li class="niets">Blauw</li>
<li class="demoVoor">Groen</li>
<li class="tekstVoor demoNa"> Oranje</li>
<li class="demoNa">Geel</li>
<li class="demoVoor demoNa">Paars</li>
<li class="tekstNa demoVoor">Wit</li>
</ul>
