CSS ile metin ekleyin, değiştirin veya değiştirin

Selam millet,

Bu derste, var olan bir metnin yerine bile olsa, CSS aracılığıyla nasıl metin ekleyebileceğimizi göreceğiz.

Tabii ki daha iyi yöntemler de var, php'yi değiştirmek (web siteniz WordPress ile yapılmışsa) ama hızlı bir çözüm istiyorsak veya başka bir şekilde nasıl yapacağımızı bilmiyorsak, bizi birden fazla yoldan çıkarabilir. sorun.

Bu derste göreceğimiz gibi, bunu yapmak biraz CSS ile çok basittir.

Spesifik olarak, mevcut bir metnin önüne bir metin eklemeyi, mevcut metinden sonra eklemeyi veya istediğimiz metinle değiştirmeyi öğreneceğiz.

Daha açık hale getirmek için gerçek bir vaka yapalım.

İşte video eğitimi:

Aşağıdaki resimde bazı ürünleri ürün adıyla birlikte görebiliriz:

Gelelim ürün adının önüne nasıl kelime ekleyeceğimize.

Bunun için CSS'yi nereye ekleyeceğimizi görmek için eleman denetçisini kullanacağız.

Başlıklardan birine sağ tıklıyoruz ve aşağıdaki gibi bir resim göreceğiz:

Sağ tarafta bir + işareti olduğunu görebiliriz, üzerine tıklıyoruz ve aşağıdaki boş css kuralı görünecektir:

İlk yapacağımız şey başlığın önüne bir metin eklemek olduğu için css kuralını şu şekilde tamamlayacağız:

h2.woocommerce-loop-product__title:before {
	content: "Producto ";
}

Önceki kodla, tüm başlıklarımızda ürün kelimesini görüyoruz:

Ürünün başlığının arkasında olmasını istiyorsak kuralı şu şekilde değiştireceğiz:

h2.woocommerce-loop-product__title:after {
	content: "Producto ";
}

İstediğimiz metni istediğimiz kelimeyle değiştirmek ise, aşağıdaki kodu eklemeliyiz:

h2.woocommerce-loop-product__title {
	visibility: hidden;
}

h2.woocommerce-loop-product__title:before {
	content: " Producto ";
	visibility:visible;
}

Bu şekilde önce ürünün adını gizleyip ardından istediğimiz kelimeyi görünür hale getiriyoruz.

Sonuç şöyle olacaktır:

Bu değişiklikleri WordPress'imize eklememiz gerektiğini unutmayın.

Bunu yapmak için Özelleştir -> Ek CSS'ye gidip kodumuzu ekliyoruz:

Bazen biraz CSS ile ilginç karmaşalardan kurtulabiliriz.

Umarım faydalı bulursunuz ve burada sorularınız var 😉