Thuộc tính content trong CSS

Thuộc tính content trong CSS xác định phần nội dung được chèn vào phần tử. Thuộc tính này có thể được sử dụng với các phần tử :before hoặc :after Pseudo Element để chèn nội dung vào trước hoặc sau phần tử.

Thuộc tính content có thể nhận giá trị:

string: bất kỳ giá trị chuỗi hợp lệ được bao trong các dấu trích dẫn.
URI: giả sử bạn muốn chèn hình ảnh vào trước hoặc sau phần tử, bạn có thể sử dụng giá trị URI để trỏ tới vị trí chứa hình ảnh đó.
counter: giá trị này có thể xác định theo một trong hai mẫu sau: counter(name, style) và counter(name, string, style). Trong cả hai trường hợp, phần nội dung sẽ là giá trị của name được hiển thị theo giá trị style tùy ý (là thập phân theo mặc định). Trong mẫu hai, giá trị string xác định một chuỗi để theo sau mỗi name.
attr(X): chèn một giá trị của một thuộc tính cụ thể vào trước hoặc sau phần tử đã chọn. Ví dụ, nó có thể hiển thị giá trị của thuộc tính alt của một hình ảnh (giá trị của thuộc tính alt chính là href trong trường hợp bạn sử dụng giá trị href trong thuộc tính alt) bởi sử dụng giá trị này.
open-quote: để xác định rằng phần nội dung hiển thị trong một dấu trích dẫn mở (ví dụ ").
close-quote: để xác định rằng phần nội dung hiển thị trong một dấu trích dẫn đóng (ví dụ "). Bạn sẽ không thể có close-quote nếu không xác định open-quote.
no-open-quote: nếu được xác định, nó sẽ xóa dấu trích dẫn mở của nội dung hiển thị (nếu có).
no-close-quote: nếu được xác định, nó sẽ xóa dấu trích dẫn đóng của nội dung hiển thị (nếu có).

Thuộc tính content có thể áp dụng cho:

Các phần tử :before và :after Pseudo Element.

Cú pháp thuộc tính content trong DOM

object.style.content = "url(home.avi)"

Quảng cáo

Ví dụ thuộc tính content trong CSS

Trong ví dụ sau, mình minh họa cách sử dụng của thuộc tính content và phần tử :before Pseudo Element để thêm nội dung vào trước bất kỳ phần tử nào.

<html>
   <head>
      <style type="text/css">
         p:before {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>
   <body>
      <p> Dong van ban nay se duoc dat truoc boi mot bullet.</p>
      <p> Dong van ban nay se duoc dat truoc boi mot bullet.</p>
      <p> Dong van ban nay se duoc dat truoc boi mot bullet.</p>
   </body>
</html>

Kết quả là:

Tiếp theo, mình sử dụng của thuộc tính content và phần tử :after Pseudo Element để thêm nội dung vào sau bất kỳ phần tử nào.

<html>
   <head>
      <style type="text/css">
         p:after {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>
   <body>
      <p> Dong van ban nay se duoc theo sau boi mot bullet.</p>
      <p> Dong van ban nay se duoc theo sau boi mot bullet.</p>
      <p> Dong van ban nay se duoc theo sau boi mot bullet.</p>
   </body>
</html>

Kết quả là:

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại vietjack.com: