Phần tử giả before
Phần tử giả before chèn văn bản
trước 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::before {
content: 'văn bản';
}
Ví dụ
Hãy làm sao để khi di chuột vào
li, văn bản sau được chèn vào đầu 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::before {
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. Ví dụ, hãy tô màu 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::before {
color: red;
content: '!!!';
}
:
Xem thêm
-
phần tử giả
after,
thực hiện chèn văn bản sau nội dung phần tử -
hàm
attr,
lấy giá trị của thuộc tính phần tử -
thuộc tính
counter-increment,
thiết lập đánh số tự động
