CSS Sözde Öğeler - Pseudo-Elements

CSS sözde öğeleri, bazı seçicilere özel efektler eklemek için kullanılır.

pseudo-elements Yazım Kuralı

Pseudo-Class yazım kuralını görelim.

seçici:pseudo-element {özellik:değer;}

Örnek olarak görelim.

p:first-line {color:orange;}

Class ile birlikte Pseudo-Elements kullanımını görelim.

seçici.class:pseudo-element {özellik:değer;}

Örnek olarak görelim.

p.ilk_satır_renkli:first-letter {
       color:orange;
}

<p class="ilk_satır_renkli"> Burası paragrafımız. </p>

:first-line Özelliği

Bir elemenanın ilk satırına stil vermek için kullanılır. Sonra ki satırlar normal olarak görüntülenir.

p:first-line {
       color:orange;
}

( Kodun okunuşu: p elemanının ilk satırında ki metinlerin rengi turuncu olsun. )

:first-letter Özelliği

Bir elemenanın ilk satırında ki ilk harfe/karaktere stil vermek için kullanılır. Sonra ki harfler/karakterler normal olarak görüntülenir.

p:first-letter {
       color:orange;
       font-size:25px;
}

(Kodun okunuşu: p elemanının ilk satırında ki ilk harfin/karakterin rengi turuncu olsun ve font boyutu 25 piksel olsun.)

:after ve :before Özellikleri

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

CSS Kodumuz:

p:before {
       {content:url(dosya.jpg);
}

h1:after {
       {content:url(dosya.jpg);
}

HTML/XHTML Kodumuz:

<p> Bu bir paragraf </p>

<h1> Burası bir başlık</h1>

Bu kod çalıştırıldığında p etiketlerinin içerikleri başında dosya.jpg adlı gorseli gösterecektir ve h1 etiketlerinin içerikleri sonunda dosya.jpg adlı gorseli gösterecektir.