CSS ::before ve ::after Nedir?

CSS’de “:before” ve “:after” seçicileri, HTML elementinin içeriğine eklemeler yapmanıza ve stil vermenize olanak
sağlayan özel pseudo-elementlerdir. Bu pseudo-elementler, web sayfalarınızı daha çekici hale getirmek veya belirli
tasarım öğelerini oluşturmak için kullanışlıdır. İşte CSS “:before” ve “:after” pseudo-elementlerinin detaylı bir
açıklaması ve bazı örnekler:
“:before” Pseudo-Elementi:
CSS’de “:before” pseudo-elementi, hedef elementin içeriğinin başına eklenen bir içerik oluşturmanıza olanak tanır. Bu
içerik, metin, resim veya başka bir HTML öğesi olabilir. Ayrıca, içerikle birlikte stil vermek için CSS özelliklerini
kullanabilirsiniz.
Örnek 1 – Metin Eklemek:

 
    .my-element:before {
        content: "Önünde Metin: ";
    }

Bu örnekte, “.my-element” sınıfına sahip bir elementin içeriğinin başına “Önünde Metin: ” şeklinde bir metin eklenir.
Örnek 2 – İkon Eklemek:

 
    .my-element:before {
        content: url("ikon.png");
    }

Bu örnekte, “.my-element” sınıfına sahip bir elementin içeriğinin başına “ikon.png” adlı bir resim eklenir.
“:after” Pseudo-Elementi:
CSS’de “:after” pseudo-elementi, hedef elementin içeriğinin sonuna eklenen bir içerik oluşturmanıza olanak tanır.
“:before” pseudo-elementiyle benzer şekilde, içerikle birlikte stil vermek için CSS özelliklerini kullanabilirsiniz.
Örnek 1 – Metin Eklemek:

 
    .my-element:after {
        content: "Sonuna Metin";
    }

Bu örnekte, “.my-element” sınıfına sahip bir elementin içeriğinin sonuna “Sonuna Metin” şeklinde bir metin eklenir.
Örnek 2 – İkon Eklemek:

 
    .my-element:after {
        content: url("ikon.png");
    }

Bu örnekte, “.my-element” sınıfına sahip bir elementin içeriğinin sonuna “ikon.png” adlı bir resim eklenir.
“:before” ve “:after” pseudo-elementlerini kullanırken ayrıca position, display, float ve content gibi CSS özelliklerini
kullanabilirsiniz. Örneğin, içeriği hedef elementin içindeki belirli bir konuma yerleştirmek veya stil vermek için
position ve display özelliklerini kullanabilirsiniz.
Genel olarak, “:before” ve “:after” pseudo-elementlerini kullanarak dinamik içerik eklemek, dekoratif öğeler oluşturmak
veya belirli tasarım gereksinimlerinizi karşılamak için CSS’de daha fazla esneklik kazanabilirsiniz