Bài 12: Thuộc tính Content trong CSS

Thuộc tính content dùng để gọi nội dung text hiển thị. Có thể hiện thị trước :before hoặc sau :after đối tượng cần cho hiển thị chung.

Ví dụ:

.email-address:before {
   content: "Email address: ";
}

Với thuộc tính trên, nó sẽ thêm nội dung vào trước một đối tượng được xác định là thẻ .email-address như sau:

<ul>
   <li class="email-address">mail@nguyentuongvi.com</li>
</ul>

Demo

Ngoài ra nó còn dùng để chèn URL, title (thường dùng làm các box hướng dẫn khi rê chuột vào và hiển thị nội dung).

Đối với link thường, ta sẽ viết đoạn HTML sau:

<a title="Cùng Học Web" href="https://cunghocwebhome.s3.cloudfly.vn">Cùng Học Web</a>

Và để hiển thị url vào text link, vừa có link chuyển đi, vừa có link hiển thị ta sẽ thêm thuộc tính vào thẻ a

a::after {
  content: " (" attr(href) ")";
}

Demo

Các thuộc tính khác của content: