Pseudo-element nədir?

CSS-də pseudo-element, seçiciyə əlavə olunan açar sözüdür və bu, elementin müəyyən bir hissəsini, əlavə DOM elementləri yaratmadan stilizə etməyə imkan verir.

Ən çox istifadə olunan pseudo-elementlər:

• ::before: Seçilmiş elementin məzmunundan əvvəl yaradılan məzmunu əlavə edir.
• ::after: Seçilmiş elementin məzmunundan sonra yaradılan məzmunu əlavə edir.
• ::first-line: Blok elementinin ilk xəttinə stil tətbiq edir.
• ::first-letter: Blok elementinin ilk hərfinə stil tətbiq edir.
• ::selection: İstifadəçi tərəfindən seçilmiş elementin hissəsinə stil tətbiq edir (məsələn, mause ilə mətn seçərkən).
• ::placeholder: <input> və ya <textarea> sahələrində placeholder mətninə stil tətbiq edir.

::before və ::after nümunələri:

div::before {
  content: "Əvvəlki: "; // Zəruri content xassəsi
  color: blue;
}

div::after {
  content: " Son"; // Zəruri content xassəsi
  color: red;
}

::first-line və ::first-letter nümunələri:

p::first-line {
  font-weight: bold;
}

p::first-letter {
  font-size: 2em;
  float: left;
  margin-right: 0.1em;
}

Pseudo-elementlər dekorativ elementlər əlavə etmək, məzmun yaratmaq, mətnin hissələrini stilizə etmək və digər tapşırıqları asanlaşdırmaq üçün faydalıdır, HTML strukturunu sadələşdirir. Tarixən onlar tək nöqtə (:) ilə başlayırdı, lakin CSS3 spesifikasiyası pseudo-klasslar (:hover, :focus) və pseudo-elementləri ayırmaq üçün iki nöqtə (::) gətirdi, lakin köhnə pseudo-elementlər üçün tək nöqtə (:) hələ də çox brauzer tərəfindən dəstəklənir. :: istifadə etmək tövsiyə olunur.