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
bộ 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ó:
<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>
li: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 đó:
<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>
li:hover::after {
color: red;
content: '!!!';
}
:
Xem thêm
-
pseudo-element
before,
thực hiện chèn trước văn bản của thẻ -
hàm
attr,
lấy giá trị của thuộc tính thẻ -
thuộc tính
counter-increment,
thiết lập đánh số tự động
