1. Trang chủ
  2. Tài liệu
  3. CSS
  4. Bài 12: Thuộc tính Content trong CSS

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://cunghocweb.com">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:

Thuộc tính Chức năng Xem thử
counter Thêm số thứ tự trước mỗi dòng Xem thử
attr(attribute) Hiển thị link trước hoặc sau text Xem thử
string Hiển thị nội dung trước hoặc sau text Xem thử
open/close-quote Thêm dấu ngoặc kép Xem thử
no-open-quote Xóa dấu ngoặc kép Xem thử
url(url) Thêm ảnh vào trước hoặc sau đối tượng Xem thử
Nội dung trên có giúp ích cho bạn? 2 Không

Mình cần giúp đỡ!

Bình luận