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ử
Chia sẻ bài viết

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

Hoặc copy địa chỉ

Nội dung

Bài 5: Cách tạo comment trong Python

Bài 4: Cách khai báo biến trong Python

Bài 3: Cài đặt Intellij IDEA và chạy Hello World trong Python

Bài 2: Hướng dẫn download và cài đặt python trên Windows

Bài 5: Tìm hiểu về Props trong ReactJS

Bài 4: Components trong ReactJS

Bài 3: Giới thiệu JSX trong ReactJS

Bài 2: Cài đặt môi trường chạy ReactJS

Bài 18: Thuộc tính icon trong CSS

Các biểu tượng có thể dễ dàng được thêm vào trang HTML của b...

Bài 17: Thuộc tính box model trong CSS

Bài 16: Thuộc tính outline trong CSS

Bài 15: Thuộc tính Height/Width trong CSS

Chat Icon Close Icon