Pseudoelementul after

Pseudoelementul after inserează text după element. Este folosit doar împreună cu proprietatea content, care stabilește textul care trebuie inserat.

Sintaxă

cssselector::after {
  content: 'text';
}

Exemplu

Să facem astfel încât la trecerea cursorului peste li în capătul său să fie inserat textul:

html<ul>
  <li>elementul listei</li>
  <li>elementul listei</li>
  <li>elementul listei</li>
  <li>elementul listei</li>
  <li>elementul listei</li>
</ul>

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

Результат:

Exemplu

Textului inserat i se pot aplica diverse stiluri. Să-l colorăm, de exemplu, într-o culoare oarecare:

html<ul>
  <li>elementul listei</li>
  <li>elementul listei</li>
  <li>elementul listei</li>
  <li>elementul listei</li>
  <li>elementul listei</li>
</ul>

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

Результат:

Veți și