CSS after before kullanımı

CSS after before nedir? nasıl kullanılır?

CSS : after ve : before özellikleri CSS2 ile gelen en faydalı özelliklerdendir. Bu sözde seçicilerden, "before" ve "after" seçicileri birçok minimal yaklaşıma olanak sağlamaktadır.

Bu özelliklerin çıkış noktası bir elementin öncesi veya sonrasına noktalama veya işaretçiler yerleştirebilmekti.

Bir etiket içeriğinin önüne bir içerik eklenmek istendiğinde : before kullanılır. Bir etiket içeriğinin sonuna bir içerik eklenmek istendiğinde ise : after kullanılır.

before ve after kullanımı

.uzmanim:before {
    content: '"';
 }
 .uzmanim:after {
    content: '"';
 }

<div class="uzmanim">uzmanım.net</div>

Çıktısı ise "uzmanım.net" şeklinde olacaktır.

p:before {
    content: '- ';
}
<p>uzmanım.net</p>

Bu örnekteki çıktımızda ise yazının başına '- ' gelicektir. Çıktısı - uzmanım.net şeklinde olacaktır.