özde Etiketler (Pseudo-Element) nelerdir?

Bir etiketin belirtilen bölümlerine stil vermek için , CSS'de Sözde Etiketler kullanılır. Örneğin ;

  • Bir etikete ait ilk harf veya satırın stilini belirlemek
  • Bir etikete ait içeriğin öncesine ve sonrasına içerik eklemek

Pseudo-Element Kullanımı

Sözde elementlerin sözdizimi şu şekildedir ;

secici::sozde-element{
ozellik:değer;
}

CSS ::first-line Kullanımı

::first-line sözde etiketi, bir metine ait ilk satıra stil atamak için kullanılır.

Aşağıdaki örnekte tüm p etiketlerinin ilk satırlarına ait biçimlendirme yapılmıştır.

p::first-line {
color: #ff0000;
font-variant: small-caps;
}

NOT : ::first-line sözde etiketi sadece blok türündeki etiketlerde çalışmaktadır.

CSS ::first-letter Kullanımı

::first-letter sözde etiketi, bir metine ait ilk harfe özel stil atamak için kullanılır.

Aşağıdaki örnekte tüm p etiketlerinin ilk harflerine ait biçimlendirme yapılmıştır.

p::first-letter {
color: #ff0000;
font-size: xx-large;
}

NOT : ::first-letter sözde etiketi sadece blok türündeki etiketlerde çalışmaktadır.

CSS ::before Kullanımı

::before sözde etiketi, bir etiketin içeriğinden önce içerik eklemek için kullanılır.

Aşağıdaki örnekte, her h1 etiketinden önce bir görsel ekler.

h1::before {
content: url(smiley.gif);
}

CSS ::after Kullanımı

::after sözde etiketi, bir etiketin içeriğinden sonra içerik eklemek için kullanılır.

Aşağıdaki örnekte, her h1 etiketinden sonra bir görsel ekler.

h1::after{
content: url(smiley.gif);
}

CSS ::marker Kullanımı

::marker sözde etiketi, liste elemanlarının işaretçilerini seçer ve özel stil tanımlamamızı sağlar. Liste elemanlarını temsil eden li etiketinin başındaki işaretçileri düzenlememizi sağlar.

Aşağıdaki örnek, tüm liste öğelerinin işaretçilerine stil tanımlar:

::marker {
color: red;
font-size: 23px;
}

CSS ::selection Kullanımı

::selection sözde etiketi, tarayıcı üzerinden herhangi bir metin seçildiğindeki durumda stil tanımlamamızı sağlar. 

::selection {
color: red;
background: yellow;
}