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

cssbộ 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ó:

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::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 đó:

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::before {
  color: red;
  content: '!!!';
}

Результат:

Xem thêm