Pseudo-element after

Pseudo-element after chèn văn bản sau phần tử. Chỉ được sử dụng kết hợp với thuộc tính content, thuộc tính này xác định văn bản cần chèn.

Cú pháp

cssbộ chọn::after {
  content: 'văn bản';
}

Ví dụ

Hãy làm sao để khi di chuột vào li thì văn bản được chèn vào cuối của nó:

html<ul>
  <li>mục danh sách</li>
  <li>mục danh sách</li>
  <li>mục danh sách</li>
  <li>mục danh sách</li>
  <li>mục danh sách</li>
</ul>

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

Результат:

Ví dụ

Có thể áp dụng các kiểu dáng khác nhau cho văn bản được chèn. Hãy tô màu, ví dụ, văn bản này bằng một màu nào đó:

html<ul>
  <li>mục danh sách</li>
  <li>mục danh sách</li>
  <li>mục danh sách</li>
  <li>mục danh sách</li>
  <li>mục danh sách</li>
</ul>

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

Результат:

Xem thêm