Pseudo-element voor en na begrijpen

Cascading Style Sheet (CSS) is primair bedoeld voor het toepassen van stijlen op de HTML-markering, maar in sommige gevallen is het toevoegen van extra opmaak aan het document overbodig of niet mogelijk. Er is dus een functie in CSS waarmee we extra opmaak kunnen toevoegen zonder te onderbreken het eigenlijke document, namelijk het pseudo-elementen.

U hebt van deze term gehoord, vooral wanneer u enkele van onze zelfstudies hebt gevolgd.

Er zijn eigenlijk een paar CSS-familieleden die zijn geclassificeerd als pseudo-elementen zoals de :Eerste lijn, :eerste brief, ::selectie, :voor en :na. Maar voor dit artikel beperken we onze dekking tot alleen de :voor en :na, “pseudo-elementen” hier zullen ze specifiek naar beide verwijzen. We zullen dit specifieke onderwerp bekijken vanuit de basis.

Syntaxis en browserondersteuning

De pseudo-elementen zijn er eigenlijk al sinds CSS1, maar de :voor en :na die we hier bespreken, werden vrijgegeven in CSS2.1. In het begin, de pseudo-elementen gebruik single-colon voor de syntaxis, en toen het web evolueerde, in CSS3 de pseudo-elementen werden herzien om dubbele colon te gebruiken - te worden ::voor & ::na - om het te onderscheiden pseudo-classes (d.w.z. : hover, :actief, enzovoorts).

Maar of u het eenkoloms- of het dubbele-dubbele punt-formaat gebruikt, de browsers zullen het ook herkennen. En aangezien Internet Explorer 8 alleen het eenkoloms-formaat ondersteunt, is het veiliger om de eenkomma te gebruiken als u een bredere browsercompatibiliteit wilt.

Wat doet het?

Kortom, de pseudo-elementen zal een extra element invoegen voor of na het element van de inhoud, dus als we ze allebei toevoegen, zijn ze technisch gelijk, met de volgende markup.

:voor Dit is de belangrijkste inhoud. :na

Maar die elementen worden niet daadwerkelijk in het document gegenereerd. Ze zijn nog steeds zichtbaar aan de oppervlakte, maar u zult ze niet vinden in de documentbron, dus praktisch gezien zijn ze dat wel nep elementen.

Gebruik van pseudo-elementen

Gebruik makend van pseudo-elementen is relatief eenvoudig; de volgende syntaxis selector: vóór zal een element toevoegen voor de selector van de inhoud tijdens deze syntaxis selector: na zal erna toevoegen en om een inhoud erin toe te voegen, kunnen we de inhoud eigendom.

Het onderstaande fragment voegt bijvoorbeeld een aanhalingsteken toe voor en na de blockquote.

 blockquote: before content: open-quote;  blockquote: after content: close-quote;

Stylen van pseudo-elementen

Ondanks dat het een nep element is, is het pseudo-elementen eigenlijk handelen als een “echt” element; we kunnen elke stijlverklaring aan hen toevoegen, zoals de kleur veranderen, achtergrond toevoegen, de lettergrootte aanpassen, de tekst erin uitlijnen enzovoort.

 blockquote: before content: open-quote; lettergrootte: 24pt; text-align: center; regelhoogte: 42px; kleur: #fff; achtergrond: #ddd; zweven: links; positie: relatief; top: 30px;  blockquote: after content: close-quote; lettergrootte: 24pt; text-align: center; regelhoogte: 42px; kleur: #fff; achtergrond: #ddd; zweven: rechts; positie: relatief; onderkant: 40px;

De dimensie opgeven

De gegenereerde elementen zijn standaard een inlineniveau-element, dus wanneer we op het punt staan de hoogte en de breedte op te geven, moeten we deze eerst definiëren als een blokelement met behulp van de weergeven: blokkeren verklaring.

 blockquote: before content: open-quote; lettergrootte: 24pt; text-align: center; regelhoogte: 42px; kleur: #fff; achtergrond: #ddd; zweven: links; positie: relatief; top: 30px; grensradius: 25px; / ** definieer het als een blokelement ** / display: block; hoogte: 25px; breedte: 25px;  blockquote: after content: close-quote; lettergrootte: 24pt; text-align: center; regelhoogte: 42px; kleur: #fff; achtergrond: #ddd; zweven: rechts; positie: relatief; onderkant: 40px; grensradius: 25px; / ** definieer het als een blokelement ** / display: block; hoogte: 25px; breedte: 25px;

Bevestig achtergrondafbeelding

We kunnen de inhoud ook vervangen door een afbeelding in plaats van alleen platte tekst. Hoewel de inhoud eigenschap biedt een url () string om een afbeelding in te voegen, maar in de meeste gevallen geef ik er de voorkeur aan de achtergrond eigenschap voor meer controle over de bijgevoegde afbeelding.

 blockquote: before content: ""; lettergrootte: 24pt; text-align: center; regelhoogte: 42px; kleur: #fff; zweven: links; positie: relatief; top: 30px; grensradius: 25px; achtergrond: url (images / quotationmark.png) -3px -3px #ddd; weergave: blok; hoogte: 25px; breedte: 25px;  blockquote: after content: ""; lettergrootte: 24pt; text-align: center; regelhoogte: 42px; kleur: #fff; zweven: rechts; positie: relatief; onderkant: 40px; grensradius: 25px; achtergrond: url (images / quotationmark.png) -1px -32px #ddd; weergave: blok; hoogte: 25px; breedte: 25px;

Zoals u aan het bovenstaande fragment kunt zien, verklaren we echter nog steeds het inhoud eigenschap en dit keer met een lege tekenreeks. De inhoud eigendom is een vereiste en moet altijd worden toegepast; anders de pseudo-element zal niet werken wat.

Combineert met pseudo-klassen

Hoewel ze een ander soort zijn pseudo, we kunnen de gebruiken pseudo-classes samen met pseudo-elementen samen in een CSS-regel, bijvoorbeeld als we de aanhalingsteken achtergrond een beetje donkerder als we erover zweven blockquote.

 blockquote: hover: after, blockquote: hover: before background-colour: # 555;

Overgangseffect toevoegen

En we kunnen zelfs het overgang eigendom op hen om een sierlijk kleurovergangseffect te creëren.

 overgang: alle 350ms; -o-overgang: alle 350ms; -moz-overgang: alle 350ms; -webkit-overgang: alle 350ms;

Helaas lijkt het overgangseffect alleen in de nieuwste versie van Firefox te werken. Hopelijk zullen meer browsers inhalen om de overgangseigenschap toe te staan om te worden toegepast pseudo-elementen in de toekomst.

demonstratie
Download de bron

Meer inspiratie

Om u te inspireren, hebben we drie coole voorbeelden geselecteerd die u ideeën kunnen geven voor uw webontwerp.

Fascinerende schaduwen

In deze tutorial legde Paul Underwood uit hoe je een meer realistisch en fascinerend schaduweffect kunt creëren :voor en :na pseudo-elementen. Beiden zijn absoluut gepositioneerd en helemaal achteraan geplaatst negatief z-index waarde.

Gestapeld beeldeffect

De ... gebruiken pseudo-elementen voor het creëren van een rommelig gestapeld beeldeffect slechts met een enkele afbeelding op de markering is ook mogelijk. De pseudo-elementen wordt gebruikt om een illusie te creëren van de gestapelde afbeeldingen aan de achterkant van de daadwerkelijke afbeelding met behulp van negatief z-index.

Conclusie

Pseudo-elementen is eenvoudig “stoer” en uiteindelijk bruikbaar, eigenlijk hebben we twee bonuselementen voor elk element dat we toevoegen, zonder de werkelijke HTML-structuur überhaupt te verstoren en ze vervolgens te veranderen in bijna alles wat we ons ooit kunnen voorstellen.

Er is eigenlijk enige verbetering voor pseudo-elementen waaraan momenteel wordt gewerkt, zoals nestelen van pseudo-elementen div :: before :: before content: "; en meerdere pseudo-elementen div :: before (3) content: "; wat in de toekomst vanzelfsprekend veel meer mogelijkheden in de webontwerppraktijk zal openen. Terwijl ze worden geïmplementeerd in de huidige browsers, laten we nu geduldig wachten.