Psevdoelement before

Psevdoelement before mətni elementdən əvvəl yerləşdirir. Yalnız content xüsusiyyəti ilə birlikdə istifadə olunur, hansı ki, əlavə ediləcək mətni təyin edir.

Sintaksis

cssselektor::before {
  content: 'mətn';
}

Nümunə

Gəlin elə edək ki, li üzərinə gələndə onun əvvəlinə mətn əlavə olunsun:

html<ul>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
</ul>

cssli:hover::before {
  content: '!!!';
}

Результат:

Nümunə

Əlavə olunan mətnə müxtəlif stillər tətbiq etmək olar. Gəlin, məsələn, bu mətni hansısa rəngə boyayaq:

html<ul>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
</ul>

cssli:hover::before {
  color: red;
  content: '!!!';
}

Результат:

Həmçinin bax