Met de ::beforeen ::afterpseudo-elementen in CSS kunt u inhoud op een pagina invoegen zonder dat deze in de HTML hoeft te staan. Hoewel het eindresultaat niet echt in de DOM staat, wordt het op de pagina weergegeven alsof het dat wel is, en zou het er in wezen zo uitzien:
div::before ( content: "before"; ) div::after ( content: "after"; ) before after De enige redenen om de ene boven de andere te gebruiken zijn:
- U wilt dat de gegenereerde inhoud positioneel vóór de elementinhoud komt.
- De
::afterinhoud is ook "na" in de volgorde van de bron, dus het zal bovenop :: before worden geplaatst als het natuurlijk op elkaar wordt gestapeld.
Merk op dat de inhoud zich nog steeds binnen het element bevindt waarop ze worden toegepast. De naamgeving voelt alsof ze kunnen komen, weet je, voor of na het element, maar het is echt voor of na de andere inhoud erin.
De waarde voor inhoud kan zijn:
- Een tekenreeks:
content: "a string";- speciale tekens moeten speciaal worden gecodeerd als een unicode-entiteit. Zie de glyphs-pagina. - Een afbeelding: content: url (/path/to/image.jpg.webp); - De afbeelding wordt op de exacte afmetingen ingevoegd en kan niet worden vergroot of verkleind. Omdat zaken als verlopen eigenlijk afbeeldingen zijn, kan een pseudo-element een verloop zijn.
- Niets: inhoud: “”; - Handig voor clearfix en het invoegen van afbeeldingen als achtergrondafbeeldingen (stel de breedte en hoogte in, en kan zelfs het formaat wijzigen met de achtergrondgrootte).
- Een teller:
content: counter(li);- Echt handig voor stylingslijsten tot: marker komt langs.
Merk op dat u geen HTML kunt invoegen (dat wordt tenminste weergegeven als HTML). content: "";
: vs ::
Elke browser die de dubbele dubbele punt (: :) CSS3-syntaxis ondersteunt, ondersteunt ook alleen de (:) syntaxis, maar IE 8 ondersteunt alleen de enkele dubbele punt, dus voor nu is het aanbevolen om alleen de enkele dubbele punt te gebruiken voor de beste browserondersteuning.
:: is het nieuwere formaat dat bedoeld is om pseudo-inhoud te onderscheiden van pseudo-selectors. Als u geen IE 8-ondersteuning nodig heeft, kunt u de dubbele dubbele punt gebruiken.
Verwant
- ::Eerste lijn
- ::eerste brief
- Pseudo-klassenkiezers
Browser-ondersteuning
Kleine problemen:
- Firefox 3.5- zou geen absolute positionering van pseudo-elementen toestaan.
- In Opera 9.2 wordt witruimte altijd binnen dit pseudo-element weergegeven alsof het
pretekst is. - IE 8 ondersteunt geen z-index op hen
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| 2+ | 1.3+ | 3.5+ | 6+ | 8+ | Ja | Ja |