The content
properti di CSS mendefinisikan isi dari suatu unsur. Anda mungkin pernah mendengar bahwa properti ini hanya berlaku untuk elemen ::before
dan ::after
pseudo. Dalam artikel ini, kita akan mempelajari berbagai kasus penggunaan untuk content
properti, termasuk di luar pseudo-elemen.
Prasyarat
Karena sebagian besar kasus penggunaan untuk content
properti melibatkan pseudo-elemen, saya menyarankan Anda untuk terbiasa dengan cara kerja ::before
dan ::after
pseudo-elemen. Berikut adalah artikel bagus untuk mempercepat Anda:
- Elemen Pseudo CSS - Penjelasan Pemilih Sebelum dan Setelah
Nilai yang Diterima
Pertama, mari kita lihat semua nilai content
properti yang diterima .
normal
: Ini adalah nilai default. Menghitungnone
saat digunakan dengan elemen semu.none
: Elemen pseudo tidak akan dibuat.: Setel konten ke string yang ditentukan. String ini dapat berisi urutan escape Unicode. Misalnya, simbol hak cipta:
\\000A9
.: Setel konten ke gambar atau gradien menggunakan
url()
ataulinear-gradient()
.open-quote
|close-quote
: Setel konten ke karakter kutipan yang sesuai yang dirujuk dariquotes
properti.no-open-quote
|no-close-quote
: Menghapus kutipan dari elemen yang dipilih, tetapi tetap menaikkan atau menurunkan tingkat bertingkat yang dirujuk dariquotes
properti.attr(*attribute*)
: Menetapkan konten sebagai nilai string dari elemen yang dipilih atribut yang dipilih.counter()
: Menetapkan konten sebagai nilai acounter
, biasanya angka.
Tali
Salah satu contoh paling dasar adalah penggunaan menambahkan konten string sebelum atau sesudah elemen. Dalam contoh ini, kami akan menambahkan simbol tautan sebelum tautan dan menambahkan URL untuk tautan setelahnya.
a::before { content: "\\1F517 "; } a::after { content: " (" attr(href) ")"; }
Perhatikan spasi setelah karakter Unicode dalam ::before
pseudo-element dan sebelum tanda kurung pertama dalam ::after
pseudo-element. Ini akan menciptakan ruang antara ini dan elemen induk.
Sebagai alternatif, Anda dapat menambahkan padding
atau margin
ke elemen semu untuk menambahkan pemisahan.
Kutipan Dasar
Dengan content
properti, Anda dapat menambahkan tanda kutip sebelum dan / atau setelah elemen. Sekarang, di HTML kami memiliki tag. Ini juga akan menambahkan kutipan di sekitar isinya. Namun, dengan
content
properti, kita dapat memiliki kontrol lebih besar atas implementasinya.
Berikut adalah contoh paling dasar dalam menambahkan tanda kutip:
Anda juga dapat melakukannya dengan menggunakan tag HTML . Tapi mungkin kita ingin memberi gaya pada kutipan secara berbeda. Jadi mari kita tambahkan kutipan pembuka saja dan bukan kutipan akhir. Dan mari kita juga memberi gaya pada kutipan pembukaan.
p { position: relative; font-size: 3rem; margin: 4rem; } p::before { content: open-quote; position: absolute; left: -3.5rem; top: -2rem; font-size: 8rem; color: rgba(0, 0, 0, 0.5) }
Hasil:

Kutipan Lanjutan
Kami juga dapat menentukan di mana kami tidak ingin kutipan. Misalnya, Anda mungkin mengutip seseorang yang mengutip orang lain. Jadi, Anda akan memiliki kutipan dalam tanda kutip, yang bisa membingungkan pembaca.
Di CodePen di bawah ini, kami menggunakan tag HTML , kemudian menentukan tag mana yang tidak boleh menampilkan tanda kutip.
Pada pandangan pertama, Anda mungkin berpikir bahwa kami sebaiknya menghapus tag jika diperlukan. Tetapi dengan menentukan di mana kutipan tidak boleh berupa kenaikan atau penurunan, tingkat bertingkat yang dirujuk dari
quotes
properti.
Untuk menjelaskan ini, kita perlu memahami quotes
properti. Ini hanyalah sebuah "larik" karakter yang harus digunakan saat mengutip. Berikut ini contohnya:
q { quotes: '“' '”' '‘' '’' '“' '”'; }
Ini adalah kumpulan kutipan. Set pertama akan digunakan untuk kutipan tingkat atas. Set kedua akan digunakan untuk kutipan bertingkat pertama. Dan set ketiga akan digunakan untuk kutipan bertingkat kedua. Dan seterusnya, jika ada lebih banyak set yang disertakan.
Sekarang setelah kita memahami quotes
properti, saya bisa menjelaskan cara kerja properti no-open-quote
dan no-close-quote
.
Untuk setiap level kutipan, kami dapat menetapkan set karakter yang berbeda untuk digunakan untuk tanda kutip. Dengan menentukan di mana kutipan tidak boleh berupa kenaikan atau penurunan tingkat bertingkat yang dirujuk dari quotes
properti.
Lihat contoh di bawah ini. Anda akan melihat bahwa tingkat kutipan kedua dilewati.
Atribut
Atribut dapat digunakan untuk mengirimkan konten dari HTML ke content
properti CSS . Kami sebenarnya sudah menggunakan ini di contoh tautan di mana kami menggunakan href
atribut untuk menyertakan string URL sebagai bagian dari konten kami.
Contoh penggunaan yang sempurna untuk ini adalah keterangan alat. Anda dapat menambahkan title
atribut ke elemen di HTML agar memiliki tooltip bawaan sederhana saat mengarahkan kursor. Tetapi untuk menyesuaikan ini, kita dapat menggunakan atribut data pada tag HTML kita dan kemudian menggunakan content
properti tersebut untuk menambahkan tooltip.
Dalam contoh ini, kami menggunakan atribut data-tooltip
dari elemen HTML kami untuk meneruskan nilai ke tooltip kami. Untuk penunjuk tooltip, kita setel content
ke ""
, seperti content
yang diperlukan untuk merender elemen pseudo ::before
atau ::after
.
Penghitung
Fungsi counter()
CSS mengembalikan string yang mewakili nilai saat ini dari penghitung bernama. Dalam contoh berikut kami memiliki daftar berurutan yang akan kami tambahkan konten menggunakan file counter
.
ol { counter-reset: exampleCounter; } li { counter-increment: exampleCounter; } li::after { content: "[" counter(exampleCounter) "] == [" counter(exampleCounter, upper-roman) "]"; }
Tanpa terlalu mendalam tentang counter
fungsinya, kita harus terlebih dahulu memulai penghitung pada ol
elemen. Kami dapat menamai ini apa pun yang kami inginkan. Kemudian kami memberi tahu penghitung untuk kenaikan pada setiap li
elemen. Dan terakhir, kami mengatur content
dari li::after
.
Inilah hasilnya:

Anda dapat menggunakan ini untuk menyesuaikan konten dalam setiap item daftar yang membutuhkan nomor yang sesuai. Atau Anda dapat menggunakan ini untuk menyesuaikan item daftar itu sendiri. Misalnya, Anda dapat menghapus penomoran default dan menerapkan sistem penomoran gaya kustom.
Gambar-gambar
Gambar dan gradien dapat digunakan dengan content
properti. Ini cukup mudah. Berikut adalah contoh yang menggunakan keduanya:
Untuk aksesibilitas, ada juga opsi untuk menambahkan teks alternatif untuk gambar. Fitur ini tidak sepenuhnya didukung.
content: url(//unsplash.it/200/200) / "Alternative Text Here";
Catatan: Ini tidak didukung di Firefox, IE, dan Safari. Selain itu, gradien tidak berfungsi di Firefox.Di luar Elemen Pseudo
Betul sekali! Anda dapat menggunakan content
properti di luar pseudo-elemen ::before
dan ::after
. Meskipun, penggunaannya terbatas dan tidak sepenuhnya kompatibel di semua browser.
Kasus penggunaan yang paling kompatibel adalah penggantian elemen.
codeSTACKr
#replace { content: url(""); width: 100%; }
Catatan: Penggantian tidak didukung di IE.Kesimpulan
Sering kali Anda akan melihat content: ""
ditemukan di elemen ::before
dan ::after
pseudo. Tetapi content
properti memiliki banyak aplikasi yang berguna.
Penggunaan terbaik menurut saya adalah menggunakannya untuk memperbarui elemen massal. Jika Anda ingin menambahkan ikon sebelum setiap tautan di situs Anda, akan lebih mudah menambahkannya melalui content
properti daripada menambahkannya ke setiap elemen dalam dokumen HTML.
Terima kasih sudah membaca!
Terimakasih telah membaca artikel ini. Mudah-mudahan, ini membantu Anda untuk lebih memahami bagaimana content
properti bekerja di CSS.
Saya Jesse dari Texas. Lihat konten saya yang lain dan beri tahu saya bagaimana saya dapat membantu Anda dalam perjalanan Anda menjadi pengembang web.
- Berlangganan Ke YouTube Saya
- Katakan halo! Instagram | Indonesia
- Daftar Untuk Buletin Saya