CSS Sebelum dan CSS Setelah - Cara Menggunakan Properti Konten

Pemrograman

The contentproperti di CSS mendefinisikan isi dari suatu unsur. Anda mungkin pernah mendengar bahwa properti ini hanya berlaku untuk elemen ::beforedan ::afterpseudo. Dalam artikel ini, kita akan mempelajari berbagai kasus penggunaan untuk contentproperti, termasuk di luar pseudo-elemen.

Prasyarat

Karena sebagian besar kasus penggunaan untuk contentproperti melibatkan pseudo-elemen, saya menyarankan Anda untuk terbiasa dengan cara kerja ::beforedan ::afterpseudo-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 contentproperti yang diterima .

  • normal: Ini adalah nilai default. Menghitung nonesaat 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()atau linear-gradient().
  • open-quote| close-quote: Setel konten ke karakter kutipan yang sesuai yang dirujuk dari quotesproperti.
  • no-open-quote| no-close-quote: Menghapus kutipan dari elemen yang dipilih, tetapi tetap menaikkan atau menurunkan tingkat bertingkat yang dirujuk dari quotesproperti.
  • attr(*attribute*): Menetapkan konten sebagai nilai string dari elemen yang dipilih atribut yang dipilih.
  • counter(): Menetapkan konten sebagai nilai a counter, 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 ::beforepseudo-element dan sebelum tanda kurung pertama dalam ::afterpseudo-element. Ini akan menciptakan ruang antara ini dan elemen induk.

Sebagai alternatif, Anda dapat menambahkan paddingatau marginke elemen semu untuk menambahkan pemisahan.

Kutipan Dasar

Dengan contentproperti, 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 contentproperti, 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:

Gambar yang menunjukkan kutipan gaya tunggal di kiri atas paragraf

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 quotesproperti.

Untuk menjelaskan ini, kita perlu memahami quotesproperti. 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 quotesproperti, saya bisa menjelaskan cara kerja properti no-open-quotedan 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 quotesproperti.

Lihat contoh di bawah ini. Anda akan melihat bahwa tingkat kutipan kedua dilewati.

Atribut

Atribut dapat digunakan untuk mengirimkan konten dari HTML ke contentproperti CSS . Kami sebenarnya sudah menggunakan ini di contoh tautan di mana kami menggunakan hrefatribut untuk menyertakan string URL sebagai bagian dari konten kami.

Contoh penggunaan yang sempurna untuk ini adalah keterangan alat. Anda dapat menambahkan titleatribut 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 contentproperti tersebut untuk menambahkan tooltip.

Dalam contoh ini, kami menggunakan atribut data-tooltipdari elemen HTML kami untuk meneruskan nilai ke tooltip kami. Untuk penunjuk tooltip, kita setel contentke "", seperti contentyang diperlukan untuk merender elemen pseudo ::beforeatau ::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 counterfungsinya, kita harus terlebih dahulu memulai penghitung pada olelemen. Kami dapat menamai ini apa pun yang kami inginkan. Kemudian kami memberi tahu penghitung untuk kenaikan pada setiap lielemen. Dan terakhir, kami mengatur contentdari li::after.

    Inilah hasilnya:

    Daftar pesanan

    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 contentproperti. 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 contentproperti di luar pseudo-elemen ::beforedan ::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 ::beforedan ::afterpseudo. Tetapi contentproperti 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 contentproperti 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 contentproperti bekerja di CSS.

    Jesse Hall (codeSTACKr)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