Псевдоэлемент after

Псевдоэлементи after матнро баъд аз элемент мегузорад. Танҳо бо якҷоягӣ бо хосияти content истифода мешавад, ки матнеро, ки бояд гузошта шавад, муайян мекунад.

Синтаксис

cssинтихобкунанда::after {
  content: 'матн';
}

Намуна

Биёед ҳамин тавр кунем, ки ҳангомаш ба li гузаштан, ба охири он матн гузошта шавад:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

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

Результат:

Намуна

Ба матни гузошташаванда метавон гуногун услубҳоро татбиқ кард. Барои мисол, ин матнро бо як ранге ранг кунем:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

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

Результат:

Ҳамчунин нигаред