Gagabayan ka ng write-up na ito tungkol sa pagbabago ng content sa CSS.
Paano Baguhin ang Nilalaman sa CSS?
Upang baguhin ang nilalaman sa CSS, gagamitin namin ang mga pamamaraan sa ibaba:
Isa-isahin natin ang bawat pamamaraan!
Paraan 1: Gamitin ang ::after Selector na may Property ng content para Baguhin ang Content sa CSS
Ang ' ::pagkatapos ' inilalagay ng tagapili ang tinukoy na nilalaman pagkatapos ng elemento ng HTML gamit ang CSS ' nilalaman ” ari-arian. Nakakatulong ang operasyong ito sa pagdaragdag ng nilalaman sa napiling elemento. Dagdag pa rito, ang ' display ” Ang ari-arian ay maaaring gamitin upang itago ang umiiral na nilalaman.
Tingnan natin ang halimbawa sa ibaba upang maunawaan kung paano baguhin ang nilalaman sa CSS gamit ang ::after selector.
Halimbawa
Narito ang aming HTML page na may tekstong “ Magandang umaga!!! ”. Palitan natin ang idinagdag na nilalaman:
Sa kasalukuyan, nagdagdag kami ng ' ' tag na may teksto sa seksyon ng katawan ng aming HTML file:
< p > Magandang umaga!!! < / p >Sa aming CSS file, gagamitin namin ngayon ang ::after selector bilang “ katawan::pagkatapos 'at gamitin ang' nilalaman ' ari-arian na may halaga ' Magandang gabi ” sa loob ng kahulugan nito. Bilang resulta, ilalagay ng tagapili ng CSS ang teksto pagkatapos mismo ng nakasulat na teksto. Panghuli, itago ang umiiral na teksto gamit ang ' display ” property at itakda ang halaga nito sa “ wala ”:
< istilo >katawan::pagkatapos {
nilalaman : 'Magandang gabi' ;
}
p {
display: wala;
}
< / istilo >
Ngayon, i-save ang iyong HTML file at simpleng buksan ito sa browser o gamitin “Live Server ” para sa parehong layunin:
Gaya ng nakikita mo, matagumpay na nabago ang nilalaman gamit ang ::after CSS selector:
Paraan 2: Gamitin ang ::before Selector na may Property ng content para Baguhin ang Content sa CSS
Sa CSS, ang ' :: dati Ang ” selector ay ginagamit upang palabasin ang nilalaman bago ang kasalukuyang nilalaman ng isang elemento. Maaari itong gamitin kasama ng ' nilalaman ” property upang magdagdag ng bagong nilalaman sa napiling elemento.
Halimbawa
Tukuyin ang ::before selector right after the body bilang “ katawan::noon ”. Ilalagay nito ang bagong nilalaman bago ang kasalukuyang nilalaman. Tandaan na ang lahat ng iba pang mga katangian ay nananatiling pareho sa nakaraang halimbawa:
< istilo >katawan::noon {
nilalaman : 'Magandang gabi' ;
}
p {
display: wala;
}
< / istilo >
Output
Ipinaliwanag namin ang iba't ibang paraan upang baguhin ang nilalaman sa CSS.
Konklusyon
Upang baguhin ang nilalaman, ' ::pagkatapos 'at' :: dati 'Ang mga tagapili ng CSS ay ginagamit kasama ang ' nilalaman ” ari-arian. Sa unang diskarte, ang tinukoy na teksto ay idinagdag pagkatapos ng napiling elemento, samantalang ang pangalawang CSS selector ay gumagana sa kabaligtaran. Bukod dito, ang ' display ” Ang ari-arian ay maaaring gamitin upang itago ang umiiral na nilalaman ng isang elemento. Ito ay kung paano ganap na nabago ang nilalaman sa CSS. Sinakop namin ang dalawang paraan ng pagbabago ng nilalaman sa CSS.