Thuộc tính content

Thuộc tính content cho phép chèn vào các thẻ văn bản được tạo tùy ý. Được áp dụng cùng với các phần tử giả after và before.

Cú pháp

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

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

Ví dụ

Hãy chèn văn bản bổ sung vào đầu và cuối văn bản của thẻ li:

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::before {
  content: '!!!';
}
li::after {
  content: '???';
}

Результат:

Ví dụ

Có thể áp dụng các kiểu khác nhau cho văn bản được chèn. Hãy tô màu, ví dụ, văn bản này thành 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::before {
  color: red;
  content: '!!!';
}
li::after {
  color: green;
  content: '???';
}

Результат:

Xem thêm