Bu yazı, CSS'deki içeriği değiştirme konusunda size rehberlik edecektir.
CSS'de İçerik Nasıl Değiştirilir?
CSS'deki içeriği değiştirmek için aşağıdaki yöntemleri kullanacağız:
Her yöntemi tek tek inceleyelim!
Yöntem 1: CSS'de İçeriği Değiştirmek için İçerik Özelliği ile Seçiciden Sonra Kullanın
“ ::sonrasında ” seçici, belirtilen içeriği CSS kullanarak HTML öğesinden sonra yerleştirir” içerik ' Emlak. Bu işlem, içeriğin seçilen öğeye eklenmesine yardımcı olur. Ek olarak, “ Görüntüle ” özelliği mevcut içeriği gizlemek için kullanılabilir.
CSS'deki içeriğin ::after seçicisini kullanarak nasıl değiştirileceğini anlamak için aşağıdaki örneğe bir göz atalım.
Örnek
İşte “metnini içeren HTML sayfamız” Günaydın!!! ”. Eklenen içeriği değiştirelim:
Şu anda, bir ' ekledik “ HTML dosyamızın gövde bölümünde metin içeren etiket:
< p > Günaydın!!! < / p >CSS dosyamızda artık ::after seçiciyi “ olarak kullanacağız. vücut::sonra ” ve “ içerik ” değeri olan mülk” İyi akşamlar ” tanımının içinde. Sonuç olarak, CSS seçici, metni yazılı metnin hemen sonrasına yerleştirir. Son olarak, “ kullanarak mevcut metni gizleyin. Görüntüle ” özelliği ve değerini “ olarak ayarlayın Yok ”:
< stil >vücut::sonra {
içerik : 'İyi akşamlar' ;
}
p {
görüntü yok;
}
< / stil >
Şimdi, HTML dosyanızı kaydedin ve tarayıcıda açın veya kullanın “Canlı Sunucu aynı amaç için:
Gördüğünüz gibi, içerik ::after CSS seçici kullanılarak başarıyla değiştirildi:
Yöntem 2: CSS'deki İçeriği Değiştirmek için ::before Selector öğesini içerik Özelliği ile kullanın
CSS'de, “ ::önceki ” seçici, içeriğin bir öğenin mevcut içeriğinden hemen önce görünmesini sağlamak için kullanılır. “ile birlikte kullanılabilir. içerik ” özelliği, seçilen öğeye yeni içerik eklemek için.
Örnek
Gövdeden hemen sonra ::before seçicisini “ olarak belirtin. vücut::önce ”. Bu, yeni içeriği mevcut içeriğin önüne yerleştirecektir. Diğer tüm özelliklerin önceki örnekte olduğu gibi kaldığını unutmayın:
< stil >vücut::önce {
içerik : 'İyi akşamlar' ;
}
p {
görüntü yok;
}
< / stil >
Çıktı
CSS'de içeriği değiştirmenin farklı yöntemlerini açıkladık.
Çözüm
İçeriği değiştirmek için, “ ::sonrasında ' ve ' ::önceki ” CSS seçiciler, “ içerik ' Emlak. İlk yaklaşımda, belirtilen metin seçilen öğeden sonra eklenirken, ikinci CSS seçicisi tam tersi şekilde çalışır. Ayrıca, “ Görüntüle ” özelliği, bir öğenin mevcut içeriğini gizlemek için kullanılabilir. CSS'de içerik tamamen bu şekilde değiştirilir. CSS'deki içeriği değiştirmenin iki yöntemini ele aldık.