Tämä kirjoitus opastaa sinua CSS:n sisällön muuttamisessa.
Kuinka muuttaa sisältöä CSS:ssä?
Käytämme seuraavia menetelmiä muuttaaksesi CSS:n sisältöä:
Käydään läpi jokainen menetelmä yksitellen!
Tapa 1: Käytä ::after Selector with content -ominaisuutta muuttaaksesi sisältöä CSS:ssä
' ::jälkeen ' -valitsin sijoittaa määritetyn sisällön HTML-elementin jälkeen käyttämällä CSS:ää ' sisältö ” omaisuutta. Tämä toiminto auttaa lisäämään sisältöä valittuun elementtiin. Lisäksi ' näyttö ” -ominaisuutta voidaan käyttää piilottamaan olemassa oleva sisältö.
Katsotaanpa alla olevaa esimerkkiä ymmärtääksesi kuinka muuttaa sisältöä CSS:ssä ::after-valitsimella.
Esimerkki
Tässä on HTML-sivumme tekstillä ' Hyvää huomenta!!! ”. Korvataan lisätty sisältö:
Tällä hetkellä olemme lisänneet ' ' -tagi tekstillä HTML-tiedostomme body-osiossa:
< s > Hyvää huomenta!!! < / s >CSS-tiedostossamme käytämme nyt ::after-valitsinta ' runko::jälkeen ' ja käytä ' sisältö 'omaisuus arvolla' Hyvää iltaa ' määritelmänsä sisällä. Tämän seurauksena CSS-valitsin sijoittaa tekstin heti kirjoitetun tekstin jälkeen. Lopuksi piilota olemassa oleva teksti käyttämällä ' näyttö ' omaisuutta ja aseta sen arvoksi ' ei mitään ':
< tyyli >runko::jälkeen {
sisältö : 'Hyvää iltaa' ;
}
s {
näyttö: ei mitään;
}
< / tyyli >
Tallenna nyt HTML-tiedostosi ja avaa se selaimella tai käytä sitä 'Live-palvelin 'samaan tarkoitukseen:
Kuten näet, sisältöä on muutettu onnistuneesti käyttämällä ::after CSS -valitsinta:
Tapa 2: Käytä ::before Selector with content Property muuttaaksesi CSS:n sisältöä
CSS:ssä ' ::ennen ” -valitsinta käytetään saamaan sisältö näkyviin juuri ennen elementin olemassa olevaa sisältöä. Sitä voidaan käyttää yhdessä ' sisältö ” -ominaisuutta lisätäksesi uutta sisältöä valittuun elementtiin.
Esimerkki
Määritä ::before-valitsin heti rungon jälkeen muodossa ' runko::ennen ”. Tämä asettaa uuden sisällön nykyisen sisällön edelle. Huomaa, että kaikki muut ominaisuudet pysyvät samoina kuin edellisessä esimerkissä:
< tyyli >runko::ennen {
sisältö : 'Hyvää iltaa' ;
}
s {
näyttö: ei mitään;
}
< / tyyli >
Lähtö
Olemme selostaneet erilaisia tapoja muuttaa sisältöä CSS:ssä.
Johtopäätös
Jos haluat muuttaa sisältöä, ' ::jälkeen ' ja ' ::ennen ' CSS-valitsimia käytetään ' sisältö ” omaisuutta. Ensimmäisessä lähestymistavassa määritetty teksti lisätään valitun elementin jälkeen, kun taas toinen CSS-valitsin toimii päinvastoin. Lisäksi ' näyttö ” -ominaisuutta voidaan käyttää piilottamaan elementin olemassa oleva sisältö. Näin sisältö muuttuu kokonaan CSS:ssä. Olemme käsitelleet kaksi tapaa muuttaa CSS:n sisältöä.