Konten - Trik CSS

Anonim

The contentproperti di CSS digunakan dalam hubungannya dengan pseudo-elemen ::beforedan ::after. Ini digunakan untuk memasukkan konten secara harfiah. Ada empat jenis nilai yang dapat dimilikinya.

Tali

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

Kemudian elemen seperti ini:

 Chris

Akan dirender seperti ini:

Name: Chris

Ini juga bisa berupa string kosong, yang biasanya terlihat pada hal-hal seperti clearfix.

Melawan

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

Informasi lebih lanjut tentang itu.

Gambar

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

Ini secara harfiah adalah sebuah gambar di halaman seperti yang diharapkan. Bisa juga berupa gradien. Perhatikan bahwa Anda tidak dapat mengubah dimensi gambar saat disisipkan dengan cara ini. Anda juga bisa menyisipkan gambar dengan menggunakan string kosong untuk konten, membuatnya dengan display: blockcara tertentu, mengukurnya, dan menggunakan background-image. Dengan cara itu Anda bisa mengubah ukurannya dengan background-size.

Atribut

Anda dapat menggunakan nilai (string, bagaimanapun) yang diambil langsung dari atribut di 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 */ ) )

The attr()fungsi tidak memiliki “jenis” dulu, sehingga Anda tidak bisa lewat nilai seperti 20px(hanya string), tapi suatu hari nanti!

teks alternatif

Spesifikasi mengatakan bahwa Anda dapat menggunakan a /dalam sintaks untuk mencantumkan teks alternatif. Sebagai contoh…

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

Mungkin Anda bisa menggunakannya seperti…

 

    

  • Make Bed
    • 

  • Grocery Shop
    • 

  • Sweep Driveway
    • 



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

Informasi Lebih Lanjut

Konten yang dimasukkan dengan cara ini sebenarnya tidak ada di DOM, jadi ada beberapa batasan. Misalnya, Anda tidak dapat melampirkan acara secara langsung (hanya) ke pseudo-elemen. Juga tidak konsisten apakah teks yang disisipkan dengan cara ini dibaca oleh pembaca layar (biasanya saat ini) atau jika Anda dapat memilihnya (biasanya bukan hari ini).

  • Hal-hal keren yang bisa dilakukan elemen pseuedo
  • Presentasi tentang elemen semu
  • Dokumen MDN

Dukungan Browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.

Desktop

Chrome Firefox YAITU Tepi Safari
4 2 9 12 3.1

Ponsel / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 2.1 3.2

Untuk Opera, url()hanya didukung di versi 7+.