Denna artikel kommer att guida dig om hur du ändrar innehåll i CSS.
Hur ändrar man innehåll i CSS?
För att ändra innehållet i CSS använder vi följande metoder:
Låt oss gå igenom varje metod en efter en!
Metod 1: Använd ::after Selector med innehållsegenskap för att ändra innehåll i CSS
den ' ::efter ' selector placerar det angivna innehållet efter HTML-elementet med hjälp av CSS ' innehåll ' fast egendom. Denna operation hjälper till att lägga till innehållet till det valda elementet. Dessutom har ' visa Egenskapen kan användas för att dölja det befintliga innehållet.
Låt oss ta en titt på exemplet nedan för att förstå hur man ändrar innehållet i CSS med hjälp av ::after-väljaren.
Exempel
Här är vår HTML-sida med texten ' God morgon!!! ”. Låt oss ersätta det tillagda innehållet:
För närvarande har vi lagt till en ' ' tagga med text i brödtextdelen av vår HTML-fil:
< sid > God morgon!!! < / sid >I vår CSS-fil kommer vi nu att använda ::after-väljaren som ' kropp::efter ' och använd ' innehåll ' egenskap med värdet ' God kväll ” i dess definition. Som ett resultat kommer CSS-väljaren att placera texten direkt efter den skrivna texten. Slutligen, dölj den befintliga texten med hjälp av ' visa ' egenskap och ställ in dess värde till ' ingen ”:
< stil >kropp::efter {
innehåll : 'God kväll' ;
}
sid {
display: ingen;
}
< / stil >
Spara nu din HTML-fil och öppna den enkelt i webbläsaren eller använd den 'Live Server ' i samma syfte:
Som du kan se har innehållet ändrats framgångsrikt med ::after CSS-väljaren:
Metod 2: Använd ::before Selector med innehållsegenskap för att ändra innehållet i CSS
I CSS, ' ::innan ”-väljaren används för att få innehållet att visas precis före det befintliga innehållet i ett element. Den kan användas i kombination med ' innehåll ” egenskap för att lägga till nytt innehåll till det valda elementet.
Exempel
Ange ::before-väljaren direkt efter brödtexten som ' kropp::förut ”. Detta kommer att placera det nya innehållet före det befintliga innehållet. Observera att alla andra egenskaper förblir desamma som i föregående exempel:
< stil >kropp::förut {
innehåll : 'God kväll' ;
}
sid {
display: ingen;
}
< / stil >
Produktion
Vi har förklarat olika metoder för att ändra innehållet i CSS.
Slutsats
För att ändra innehållet ' ::efter ' och ' ::innan ' CSS-väljare används med ' innehåll ' fast egendom. I den första metoden läggs den angivna texten till efter det valda elementet, medan den andra CSS-väljaren fungerar tvärtom. Dessutom har ' visa ”-egenskapen kan användas för att dölja det befintliga innehållet i ett element. Så här ändras innehållet helt i CSS. Vi har täckt de två metoderna för att ändra innehållet i CSS.