Image default
Css Dersleri

Css Before ve After Sözde Öğelerin Kullanımı

Css2 ile gelen en faydalı özelliklerden biri de yeni sözde seçicilerden Before ve After’ın nasıl kullanıldığını ve kullanım alanlarının nereler olduğunu göreceğiz. Css ile pek haşir neşir olmayanların pek kullanmadığı ama ne olduğunu öğrendiğinizde tam aradığım şey diyeceğiniz bir özellik.

Türkçe karşılığı olarak sırası ile öncesi ve sonrası olarak tanımlanmaktadır. Yani seçmiş olduğumuz nesnenin öncesinde ve sonrasında şu işlemi yap diyeceğiz. Şimdi basit bir örnek ile nasıl çalıştığını anlatayım.

Diyelim ki bir paragraf yapımız var ve bu payının tırnak içinde olmasını istiyoruz. İşte o zaman Before ve After özelliğini kullanmamız gerekmektedir. Paragrafın başına ve sonuna tırnak koy diyeceğiz yani. Onun için kodlaması şu şekilde olacaktır;

deneme paragraf yazısı

Yukarıdaki paragraf classına ait değerde hiçbir şekilde tırnak işareti konulmazken css ile Before ve After kullanarak content özelliği ile tırnak işaretlerinin konulmasını istedik. Böylesi bir kolay kullanımı var işte. Tabi hep content ile bir şeyler yazdırmıyoruz. İstediğimiz gibi css düzenlemesi yapabiliriz. Content ile kısıtlı kalmayın yani.

İlla iki değeri de aynı anda kullanacağız diye bir zorunlulukta yok mesela bu seferde yazıların en sonuna üç nokta koyarak bir düzenleme yapalım. Onun kodlaması da şu şekilde olacak;

deneme paragraf yazısı

Görmüş olduğunuz gibi bu kadar basit! Şimdi isterseniz yazı yerine biraz düzenlemeler yaparak daha farklı olarak nasıl kullanılır bunu görelim.

Link yapılarında çoğu sitede linkin sonunda bir simge olur. Bu simgeyi biz After cümleciği ile yapabiliriz. Bunun örneğini de şu şekilde verebilirim;

ibrahim Çevrük

Yukarıdaki gibi yaptığımızda linklerde targeti _blank olan değerlere uygulanacak olan bir işlem var. Bu işlem link değerinin sonuna bir resim dosyası koymaktır.

Örnekler üzerinden basit anlamda bu şekilde anlatabiliyorum anca 🙂 Bir sonraki derslerde bu özelliği kullanarak nasıl farklı şekiller ve işlemler yapılabilir bunları göreceğiz.

Bir önceki yazım olan CSS ile Kalp Yapmak başlıklı makalemi de okumanızı öneririm.

İlgilizi Çekecek Konular

Css Sprite Özelliğinin Kullanımı

ibrahimcevruk

Css ile Genişlik ve Yükseklik Belirtmek

ibrahimcevruk

CSS’te Özel Font Kullanımı (@Font-face)

ibrahimcevruk