Ten artykuł poprowadzi Cię o zmianie treści w CSS.
Jak zmienić zawartość w CSS?
Do zmiany treści w CSS użyjemy poniższych metod:
Przeanalizujmy każdą metodę jeden po drugim!
Metoda 1: Użyj ::after Selector z właściwością content, aby zmienić zawartość w CSS
„ ::po ” selektor umieszcza określoną treść po elemencie HTML za pomocą CSS „ zawartość ' własność. Ta operacja pomaga w dodaniu treści do wybranego elementu. Dodatkowo „ wyświetlacz ” właściwość może być wykorzystana do ukrycia istniejącej treści.
Rzućmy okiem na poniższy przykład, aby zrozumieć, jak zmienić zawartość w CSS za pomocą selektora ::after.
Przykład
Oto nasza strona HTML z tekstem „ Dzień dobry!!! ”. Zamieńmy dodaną treść:
Obecnie dodaliśmy „ tag z tekstem w sekcji treści naszego pliku HTML:
< p > Dzień dobry!!! < / p >W naszym pliku CSS użyjemy teraz selektora ::after jako „ ciało::po ” i użyj „ zawartość ” właściwość o wartości ” Dobry wieczór ” wewnątrz jego definicji. W rezultacie selektor CSS umieści tekst zaraz po napisanym tekście. Na koniec ukryj istniejący tekst za pomocą „ wyświetlacz ” i ustaw jej wartość na “ Żaden ”:
< styl >ciało::po {
zawartość : 'Dobry wieczór' ;
}
p {
Nie wyświetla się;
}
< / styl >
Teraz zapisz plik HTML i po prostu otwórz go w przeglądarce lub użyj „Serwer na żywo w tym samym celu:
Jak widać, zawartość została pomyślnie zmieniona za pomocą selektora ::after CSS:
Metoda 2: Użyj ::before Selector z właściwością content, aby zmienić zawartość w CSS
W CSS „ ::zanim ” selektor służy do wyświetlania treści tuż przed istniejącą treścią elementu. Może być używany w połączeniu z „ zawartość ”, aby dodać nową zawartość do wybranego elementu.
Przykład
Określ selektor ::before zaraz po treści jako „ ciało::przed ”. Spowoduje to umieszczenie nowej treści przed istniejącą treścią. Zauważ, że wszystkie pozostałe właściwości pozostają takie same jak w poprzednim przykładzie:
< styl >ciało::przed {
zawartość : 'Dobry wieczór' ;
}
p {
Nie wyświetla się;
}
< / styl >
Wyjście
Wyjaśniliśmy różne metody zmiany treści w CSS.
Wniosek
Aby zmienić treść, „ ::po ' oraz ' ::zanim ” selektory CSS są używane z „ zawartość ' własność. W pierwszym podejściu określony tekst jest dodawany po zaznaczonym elemencie, podczas gdy drugi selektor CSS działa odwrotnie. Ponadto „ wyświetlacz Właściwość ” może być wykorzystana do ukrycia istniejącej zawartości elementu. W ten sposób treść jest całkowicie zmieniana w CSS. Omówiliśmy dwie metody zmiany treści w CSS.