Memahami Elemen Pseudo sebelum dan sesudah
Cascading Style Sheet (CSS) terutama ditujukan untuk menerapkan gaya ke markup HTML, namun dalam beberapa kasus ketika menambahkan markup tambahan ke dokumen itu berlebihan atau tidak mungkin, sebenarnya ada fitur dalam CSS yang memungkinkan kita untuk menambahkan markup tambahan tanpa mengganggu dokumen yang sebenarnya, yaitu elemen semu.
Anda telah mendengar istilah ini, terutama ketika Anda telah mengikuti beberapa tutorial kami.
Sebenarnya ada beberapa anggota keluarga CSS yang diklasifikasikan sebagai elemen semu seperti :garis pertama, :surat pertama, ::pilihan, :sebelum dan :setelah. Tetapi, untuk artikel ini, kami akan membatasi cakupan kami hanya pada :sebelum dan :setelah, “elemen semu” di sini akan secara khusus merujuk keduanya. Kami akan melihat subjek khusus ini dari dasar-dasar.
Sintaks dan Dukungan Browser
Itu elemen semu sebenarnya sudah ada sejak itu CSS1, tetapi :sebelum dan :setelah yang sedang kita bahas di sini dirilis pada CSS2.1. Pada awalnya, the elemen semu menggunakan single-colon untuk sintaks, kemudian saat web berevolusi, dalam CSS3 elemen semu direvisi untuk menggunakan double-colon - menjadi ::sebelum & ::setelah - untuk membedakannya dengan kelas semu (yaitu. : melayang, :aktif, dan seterusnya).
Namun, apakah Anda menggunakan format titik dua tunggal atau dua titik dua, browser akan tetap mengenali keduanya. Dan karena Internet Explorer 8 hanya mendukung format satu-usus besar, lebih aman untuk menggunakan satu-usus besar jika Anda ingin kompatibilitas browser yang lebih luas.
Apa fungsinya?
Singkatnya, elemen semu akan memasukkan elemen tambahan sebelum atau setelah elemen konten, jadi ketika kami menambahkan keduanya, secara teknis keduanya sama, dengan markup berikut.
:sebelum Ini konten utama. :setelah
Tetapi elemen-elemen itu sebenarnya tidak dihasilkan pada dokumen. Mereka masih terlihat di permukaan tetapi Anda tidak akan menemukannya di sumber dokumen, jadi praktis mereka gadungan elemen.
Menggunakan elemen semu
Menggunakan elemen semu relatif mudah; sintaks berikut pemilih: sebelumnya akan menambahkan elemen sebelum pemilih konten sementara sintaks ini pemilih: setelah akan menambahkan setelah itu, dan untuk menambahkan konten di dalamnya kita dapat menggunakan konten milik.
Misalnya, cuplikan di bawah ini akan menambahkan tanda kutip sebelum dan sesudah blokir.
blockquote: before content: open-quote; blockquote: after content: close-quote;
Styling elemen semu
Meskipun menjadi elemen palsu, namun elemen semu sebenarnya bertingkah seperti “nyata” elemen; kami dapat menambahkan deklarasi gaya pada mereka, seperti mengubah warna, menambahkan latar belakang, menyesuaikan ukuran font, menyelaraskan teks di dalamnya dan sebagainya.
blockquote: before content: open-quote; ukuran font: 24pt; perataan teks: tengah; garis-tinggi: 42px; warna: #fff; latar belakang: #ddd; mengapung: kiri; posisi: relatif; atas: 30px; blockquote: after content: close-quote; ukuran font: 24pt; perataan teks: tengah; garis-tinggi: 42px; warna: #fff; latar belakang: #ddd; mengapung: benar; posisi: relatif; bawah: 40px;
Menentukan dimensi
Elemen-elemen yang dihasilkan secara default merupakan elemen level-inline, jadi ketika kita hendak menentukan tinggi dan lebar, kita harus terlebih dahulu mendefinisikannya sebagai elemen blok menggunakan tampilan: blok pernyataan.
blockquote: before content: open-quote; ukuran font: 24pt; perataan teks: tengah; garis-tinggi: 42px; warna: #fff; latar belakang: #ddd; mengapung: kiri; posisi: relatif; atas: 30px; batas-radius: 25px; / ** mendefinisikannya sebagai elemen blok ** / display: blok; tinggi: 25px; lebar: 25px; blockquote: after content: close-quote; ukuran font: 24pt; perataan teks: tengah; garis-tinggi: 42px; warna: #fff; latar belakang: #ddd; mengapung: benar; posisi: relatif; bawah: 40px; batas-radius: 25px; / ** mendefinisikannya sebagai elemen blok ** / display: blok; tinggi: 25px; lebar: 25px;
Lampirkan gambar latar belakang
Kami juga dapat mengganti konten dengan gambar daripada hanya teks biasa. walaupun konten properti menyediakan a url () string untuk menyisipkan gambar, tetapi dalam banyak kasus saya lebih suka menggunakan Latar Belakang properti untuk kontrol lebih besar atas gambar yang dilampirkan.
blockquote: before content: ""; ukuran font: 24pt; perataan teks: tengah; garis-tinggi: 42px; warna: #fff; mengapung: kiri; posisi: relatif; atas: 30px; batas-radius: 25px; latar belakang: url (gambar / quotationmark.png) -3px -3px #ddd; display: blok; tinggi: 25px; lebar: 25px; blockquote: after content: ""; ukuran font: 24pt; perataan teks: tengah; garis-tinggi: 42px; warna: #fff; mengapung: benar; posisi: relatif; bawah: 40px; batas-radius: 25px; latar belakang: url (gambar / quotationmark.png) -1px -32px #ddd; display: blok; tinggi: 25px; lebar: 25px;
Namun, seperti yang Anda lihat dari cuplikan di atas, kami masih mendeklarasikan konten properti dan kali ini dengan string kosong. Itu konten properti adalah sebuah persyaratan dan harus selalu diterapkan; selain itu elemen semu Tidak akan berhasil apa pun.
Menggabungkan dengan pseudo-class
Meskipun mereka berbeda jenis semu, kita bisa menggunakan kelas semu bersama elemen semu bersama dalam satu aturan CSS, misalnya, jika kita ingin mengubah latar belakang tanda kutip sedikit lebih gelap ketika kita membawa mouse blokir.
blockquote: hover: after, blockquote: hover: before background-color: # 555;
Menambahkan Efek Transisi
Dan kita bahkan dapat menerapkannya transisi properti pada mereka untuk membuat efek transisi warna anggun.
transisi: semua 350ms; -o-transisi: semua 350ms; -moz-transisi: semua 350ms; -webkit-transisi: semua 350ms;
Sayangnya, efek transisi tampaknya hanya berfungsi di Firefox versi terbaru. Semoga lebih banyak peramban akan menyusul untuk memungkinkan properti transisi diterapkan elemen semu di masa depan.
- Demo
- Sumber Unduhan
Lebih Banyak Inspirasi
Untuk menginspirasi Anda, kami telah memilih tiga contoh keren yang dapat memberi Anda ide untuk desain web Anda.
Bayangan yang Memukau
Dalam tutorial ini, Paul Underwood menjelaskan cara membuat efek bayangan yang lebih realistis dan menarik :sebelum dan :setelah elemen semu. Keduanya diposisikan secara absolut dan ditempatkan di bagian paling belakang negatif indeks-z nilai.
Efek Gambar yang Ditumpuk
Menggunakan elemen semu untuk membuat efek gambar bertumpuk berantakan hanya dengan satu gambar pada markup juga dimungkinkan. Itu elemen semu digunakan untuk membuat ilusi gambar yang ditumpuk di belakang gambar yang sebenarnya menggunakan negatif indeks-z.
Kesimpulan
Pelemen seudo adalah secara sederhana “keren” dan akhirnya dapat digunakan, pada dasarnya kita miliki dua elemen bonus untuk setiap elemen yang kita tambahkan tanpa mengganggu struktur HTML yang sebenarnya sama sekali, dan kemudian mengubahnya menjadi hampir semua yang dapat kita bayangkan.
Sebenarnya ada beberapa perbaikan untuk elemen semu yang sedang dikerjakan, seperti elemen semu bersarang div :: before :: before content: "; dan beberapa elemen semu div :: before (3) content: "; yang jelas akan membuka lebih banyak kemungkinan dalam praktik desain web di masa depan. Sementara mereka sedang diterapkan di browser saat ini, mari kita tunggu dengan sabar untuk saat ini.
