CSS Content ve attr()

CSS’e çok şey borçluyuz, günümüzde var olan tüm web uygulamaları hatta neredeyse tüm mobil uygulamaların görünümleri CSS ile verilmektedir.

CSS’in “content” fonksiyonu basitçe şöyle çalışır:

.benimeleman:after{
  content: "Merhaba Dünya!";
}

Burada :after(sonrasında) veya :before(öncesinde) kullanılabilir.

Peki attr?

ATTR Attribute(Nitelik) kısaltmasıdır. CSS’de attr bir elemanın içerisindeki belirteç tagindeki(title, data-src, href vs.) değeri alıp kullanmaya yarar, şimdilik bunu yalnızca content içerisinde kullanabiliyoruz, JS ile elbette her yerde kullanılabilir.

Kullanımı şöyle:

HTML

<div class="benimeleman" data-line="Merhaba Dünya!"></div>

CSS

.benimeleman:after{
	content: attr(data-line);
}
//veya
[data-line]:after{
	content: attr(data-line);
}
//çıktısı: Merhaba Dünya!

//ek olarak
[data-line]:after{
	content: "[Mesajım: " attr(data-line) "]"; 
}
//çıktısı: [Mesajım: Merhaba Dünya!]

Örnek için bakın: https://codepen.io/wolkanca/pen/xxqOVJo

Kaynaklar:

developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

developer.mozilla.org/en-US/docs/Web/CSS/attr()

tsafaelmali.medium.com/css-attribute-selector-nedir…

Kolay gelsin.