Javascript Css Na

| | | | | | | | | | | | | | | | | | | | | | | | | | | | |

De CSS:: vóór de inhoud van de selectie wordt ingevoegd vóór een geselecteerd element. CSS: na de inhoud van inserts na een gespecificeerd element. Deze selectors worden vaak gebruikt om tekst voor of na een alinea of link toe te voegen.

Bij het ontwerpen van een website kunt u inhoud voor of na inhoud op een pagina toevoegen. element. U kunt bijvoorbeeld een afbeelding toevoegen voor elk opsommingsteken in een lijst.

Dit is waar:: voor en na:: pseudo-CSS-elementen komen binnen. Met deze pseudo-elementen kunt u inhoud invoegen voor of na de inhoud van een element.

Deze tutorial zal, verwijzend naar voorbeelden, bespreken hoe de:: before en after:: pseudo-elementen kunnen worden gebruikt om de inhoud van een webpagina te versieren. Tegen de tijd dat u klaar bent met het lezen van deze tutorial, bent u een expert in het gebruik van:: before and after:: pseudo-elementen in CSS.

CSS pseudo-elementen

Een pseudo- element is een speciaal trefwoord waarmee u een specifiek deel van de elementen kunt opmaken die door een CSS-selector zijn geselecteerd. In dit artikel noemen we pseudo-elementen als selectors omdat elk pseudo-element een selector is

Pseudo-elementen zijn handig wanneer u een element wilt opmaken zonder CSS of klassen-ID naar het element. Als u bijvoorbeeld een ">"-pijl wilt toevoegen na elke link op een webpagina, kunt u een pseudo-element gebruiken.

CSS biedt een breed scala aan pseudo-elementen. In het bijzonder:: eerste regel,:: eerste letter,:: voor en na::. Voor de doeleinden van deze tutorial zullen we ons concentreren op de laatste twee::::: voor en na.

Pseudo-elementen worden meestal weergegeven met dubbele punten (::). Hoewel CSS3 het gebruik van een enkele punt (:)-syntaxis ondersteunt om een pseudo-element te declareren, is het gebruik van dubbele puntnotatie de beste praktijk

Dit komt omdat de notatie dubbele punt wordt gebruikt om de plaatsaanduidingen voor pseudo-klassen te onderscheiden.

CSS:: before element pseudo-element

It:: before pseudo- l "voegt inhoud toe die vóór een element verschijnt op een webpagina Vaak wordt dit element gebruikt om wat tekst toe te voegen voor een alinea

de syntaxis van:: before pseudo-element is: ..

The:: before selector wordt toegevoegd na. de naam van het element waaraan je wil de selector toepassen

Dit zijn de belangrijkste componenten van het front:: pseudo-element:

Als u meer wilt weten over hoe selectors werken in CSS, lees onze gids CSS Selectors .

Laten we een voorbeeld nemen om te demonstreren hoe de:: before het pseudo-element werkt.

Stel dat we een emoji-link (Ôîó) willen toevoegen voor elke link op een voorbeeldwebpagina. We zouden dit kunnen doen met de volgende code:

Onze code geeft als resultaat:

Capture d ` screen vanaf 2020 12 09 08 00 16

We hebben dit gedaan door een inhoudseigenschap in ons CSS-bestand op te geven, die er als volgt uitziet:

content: "Ôîó";

Onze regel heeft een emoji-link toegevoegd aan het begin van onze -tag die we hebben gemaakt

de waarde van het attribuut "content" kan zijn:.

U kunt geen HTML-element invoegen in het content-attribuut.

de CSS:: after pseudo-element

the CSS:: after pseudo-element stelt u in staat om direct daarna inhoud toe te voegen een element op een webpagina. Net als de:: before selector, after:: wordt vaak gebruikt met links of alinea`s met tekst.

Th De syntaxis van p seudo-element:: komt na het volgende:

de: : na syntaxis is hetzelfde als de syntaxis voor het:: before pseudo-element.:: accepteert na dezelfde waarden ‚Äã‚Äãvoor het attribuut "content" dat we eerder hebben besproken

:: na CSS-voorbeeld

Stel dat u een link-element ontwerpt op een site voor een bakkerij genaamd Hansons Bakery. Deze link moet de tekst "Ga naar pagina Home Hansons Bakery." Onze link moet worden omgeven door een effen zwarte rand van 1 pixel breed.

Na ons label willen we een tekst box om te verschijnen met de inhoud Deze pagina ons gebakken goederen menu. (Let op de witruimte voor het woord "This".) Ons vak moet een oranje HTML-achtergrondkleur hebben.

We zouden dit kunnen doen met de volgende code:

Onze code genereerde inhoud die lijkt op deze:

< class figure = "wp-bloc-image"> Capture of 2020 12 09 08 00 47 1