Teşekkür ederim

Öncelikle teşekkür ederim
* işareti tüm elementleri kapsayan bir seçicidir, bu seçici p,a,div,span,i,vb. html etiketlerinin tamamını etkiler. Bunu anladıysak before ve after için küçük bir örnek paylaşacağım.

Before ve after, elementin kendisinden önce(before) veya sonra(after) içerik eklememizi sağlar. Bunu daha çok content özelliği için değil de mevcut elemente ekstra bir şeyler eklemek istersek kullanırız. Mesela bir fotoğrafta brightness filtresini kullanmadan parlaklığını düşürmemiz/karartmamız gerekiyor, bunun için fotoğrafın üzerine siyah bir arka plan ekleyip saydamlaştırabiliriz. İşte before ve after seçicileri burada işimize yarayacak, tıpkı bir element ekler gibi düşünün. İmg etiketlerinde before ve after seçicileri kullanılamıyor, bu yüzden kapsayıcı div ekleyeceğiz.


Before sayesinde thumb etiketinden önce ekstra element kullanmayarak siyah renkli bir kutu oluşturduk. Fark ettiyseniz son elemanda kırmızı bir çizgi var, bunu After ile ekledik. Before'u siyah kutu için kullanarak hakkımızı doldurduk diğer seçicimiz After sayesinde bir özellik daha ekledik. Buradaki mantık herhangi bir element kullanmadan CSS üzerinde mevcut elementin kendisinden önce ve sonra bir şeyler ekleyebilmemizdir, ekleyeceğiniz şeyin ne olduğu tamamen hayal gücünüze kalmış. Ayrıca unutmayın, before ve after'da content özelliği boş olsun veya olmasın mutlaka verilmelidir.