after կեղծ տարրը

after կեղծ տարրը տեքստ է ավելացնում տարրից հետո: Օգտագործվում է բացառապես content հատկության հետ միասին, որը սահմանում է ավելացվող տեքստը:

Շարահյուսություն

cssընտրիչ::after {
  content: 'տեքստ';
}

Օրինակ

Եկեք ստեղծենք, որ երբ դրվում է ցուցիչը li-ի վրա, նրա վերջում ավելանա տեքստ.

html<ul>
  <li>ցանկի տարր</li>
  <li>ցանկի տարր</li>
  <li>ցանկի տարր</li>
  <li>ցանկի տարր</li>
  <li>ցանկի տարր</li>
</ul>

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

Результат:

Օրինակ

Ավելացվող տեքստին կարելի է կիրառել տարբեր ուլունքներ: Օրինակ, եկեք ներկենք այս տեքստը ինչ-որ գույնով.

html<ul>
  <li>ցանկի տարր</li>
  <li>ցանկի տարր</li>
  <li>ցանկի տարր</li>
  <li>ցանկի տարր</li>
  <li>ցանկի տարր</li>
</ul>

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

Результат:

Տես նաև