Nội dung - Thủ thuật CSS

Anonim

Các contentbất động sản trong CSS được sử dụng kết hợp với các yếu tố giả ::beforevà ::after. Nó được sử dụng để chèn nội dung theo đúng nghĩa đen. Nó có thể có bốn loại giá trị.

Chuỗi

.name::before ( content: "Name: "; )

Sau đó, một phần tử như thế này:

 Chris

Sẽ hiển thị như thế này:

Name: Chris

Nó cũng có thể là một chuỗi rỗng, thường thấy trong những thứ như tiền tố rõ ràng.

Quầy tính tiền

div::before ( content: counter(my-counter); )

Thông tin thêm về điều đó.

Hình ảnh

div::before ( content: url(image.jpg.webp); )

Đây thực sự là một hình ảnh trên trang giống như vậy. Nó cũng có thể là một gradient. Lưu ý rằng bạn không thể thay đổi kích thước của hình ảnh khi chèn theo cách này. Bạn cũng có thể chèn một hình ảnh bằng cách sử dụng một chuỗi trống cho nội dung, làm cho nó display: blocktheo một cách nào đó, định cỡ nó và sử dụng background-image. Bằng cách đó, bạn có thể kích thước lại nó với background-size.

Thuộc tính

Bạn vẫn có thể sử dụng các giá trị (chuỗi) được lấy ngay từ các thuộc tính trong HTML.

 60 
(data-visual-label)::before ( content: attr(data-visual-label) ": "; ) /* Classic print trick! Show URLs! */ @media (print) ( a(href)::after ( content: " (" attr(href) ") "; /* you could combine a url() in here even if you wanted */ ) )

Các attr()chức năng không có “loại” chỉ được nêu ra, vì vậy bạn không thể vượt qua một giá trị như 20px(chỉ là chuỗi), nhưng một ngày nào đó!

Văn bản thay thế

Thông số cho biết rằng bạn có thể sử dụng một /trong cú pháp để liệt kê văn bản thay thế. Ví dụ…

.el::before ( content: "⭐️" / "Alternate Text for that star"; content: "→" / ""; /* Visual only, don't read. */ )

Có lẽ bạn có thể sử dụng nó như…

 

    

  • Make Bed
    • 

  • Grocery Shop
    • 

  • Sweep Driveway
    • 



(data-alt-pseudo="Completed")::before ( content: "✅"; /* fallback */ content: "✅" / attr(data-alt-pseudo); )

Thêm thông tin

Nội dung được chèn theo cách này không thực sự nằm trong DOM, vì vậy nó có một số hạn chế. Ví dụ: bạn không thể đính kèm một sự kiện trực tiếp (chỉ) vào một phần tử giả. Nó cũng không nhất quán liệu văn bản được chèn theo cách này có được đọc bởi trình đọc màn hình (thường là những ngày này) hay bạn có thể chọn nó (thường không phải là những ngày này).

  • Những điều thú vị mà yếu tố pseuedo có thể làm
  • Trình bày về yếu tố giả
  • Tài liệu MDN

Hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Trình duyệt Chrome Firefox I E Cạnh Safari
4 2 9 12 3.1

Di động / Máy tính bảng

Chrome dành cho Android Android Firefox Android iOS Safari
88 85 2.1 3.2

Đối với Opera, url()chỉ được hỗ trợ trong phiên bản 7+.