Dit artikel zal u begeleiden bij het wijzigen van inhoud in CSS.
Hoe inhoud in CSS wijzigen?
Om de inhoud in CSS te wijzigen, gebruiken we de onderstaande methoden:
Laten we elke methode één voor één doornemen!
Methode 1: Gebruik ::after Selector met inhoudseigenschap om inhoud in CSS te wijzigen
De ' ::na ” selector plaatst de gespecificeerde inhoud na het HTML-element met behulp van de CSS “ inhoud ' eigendom. Deze bewerking helpt bij het toevoegen van de inhoud aan het geselecteerde element. Daarnaast is de “ Scherm ” eigenschap kan worden gebruikt om de bestaande inhoud te verbergen.
Laten we eens kijken naar het onderstaande voorbeeld om te begrijpen hoe u de inhoud in CSS kunt wijzigen met behulp van de ::after selector.
Voorbeeld
Hier is onze HTML-pagina met de tekst ' Goedemorgen!!! ”. Laten we de toegevoegde inhoud vervangen:
Momenteel hebben we een ' “ tag met tekst in het hoofdgedeelte van ons HTML-bestand:
< p > Goedemorgen!!! < / p >In ons CSS-bestand zullen we nu de ::after selector gebruiken als “ lichaam::na ” en gebruik de “ inhoud ” eigenschap met de waarde “ Goedeavond ” binnen zijn definitie. Als gevolg hiervan plaatst de CSS-selector de tekst direct na de geschreven tekst. Verberg ten slotte de bestaande tekst met de ' Scherm ” eigenschap en stel de waarde in op “ geen ”:
< stijl >lichaam::na {
inhoud : 'Goedeavond' ;
}
p {
Geen weergeven;
}
< / stijl >
Sla nu uw HTML-bestand op en open het eenvoudig in de browser of gebruik “Live Server ” voor hetzelfde doel:
Zoals u kunt zien, is de inhoud met succes gewijzigd met behulp van de ::after CSS-selector:
Methode 2: Gebruik ::before Selector met inhoudseigenschap om de inhoud in CSS te wijzigen
In CSS wordt de ' ::voordat ” selector wordt gebruikt om de inhoud vlak voor de bestaande inhoud van een element te laten verschijnen. Het kan worden gebruikt in combinatie met de ' inhoud ” eigenschap om nieuwe inhoud toe te voegen aan het geselecteerde element.
Voorbeeld
Specificeer de ::before selector direct na de body als “ lichaam::voorheen ”. Hierdoor wordt de nieuwe inhoud vóór de bestaande inhoud geplaatst. Merk op dat alle andere eigenschappen hetzelfde blijven als in het vorige voorbeeld:
< stijl >lichaam::voorheen {
inhoud : 'Goedeavond' ;
}
p {
Geen weergeven;
}
< / stijl >
Uitgang:
We hebben verschillende methoden uitgelegd om de inhoud in CSS te wijzigen.
Conclusie
Om de inhoud te wijzigen, “ ::na ' en ' ::voordat ” CSS-selectors worden gebruikt met de “ inhoud ' eigendom. In de eerste benadering wordt de gespecificeerde tekst toegevoegd na het geselecteerde element, terwijl de tweede CSS-selector het tegenovergestelde werkt. Bovendien is de “ Scherm ” eigenschap kan worden gebruikt om de bestaande inhoud van een element te verbergen. Zo wordt de inhoud in CSS volledig veranderd. We hebben de twee methoden besproken om de inhoud in CSS te wijzigen.