Pseudo-elemen adalah salah satu penyeleksi tingkat lanjut yang tersedia untuk digunakan di CSS. Tujuan utama di balik penyeleksi ini adalah untuk membuat gaya unik, tanpa mengubah dokumen HTML yang digunakan untuk membuat struktur dasar laman web tertentu.

Berikut cara menggunakan pseudo-elemen di CSS.

Elemen Pseudo umum

Ada daftar pseudo-element yang lengkap yang tersedia untuk membuat hidup seorang web developer lebih mudah. Beberapa elemen semu ini meliputi:

• Sebelum
• Setelah
• Latar belakang
• Garis pertama
• Surat pertama

Dalam situasi tertentu, beberapa elemen semu akan terbukti lebih cocok daripada yang lain, tetapi satu hal yang tetap konstan adalah struktur umum untuk menggunakan elemen semu apa pun.

Contoh Struktur Elemen Pseudo

selector:: pseudo-element {
/ * kode css * /
} 

Padahal kamu bisa menggunakan elemen HTML sebagai pemilih, Anda disarankan untuk menggunakan kelas atau id untuk menghindari penargetan elemen yang tidak diinginkan dalam tata letak Anda. Elemen, gaya, atau data yang ingin Anda sisipkan pada posisi yang diinginkan harus ditempatkan di antara tanda kurung kurawal.

Elemen semu sebelum dan sesudah adalah yang paling populer dalam daftar, dan mengingat ada banyak cara praktis untuk menggunakannya — tidak sulit untuk mengetahui alasannya.

Menggunakan elemen Before Pseudo di CSS

Meskipun bukan tidak mungkin, sulit untuk menghamparkan gambar dengan teks yang dapat dibaca di CSS. Ini sebagian besar karena gambar dan teks akan menempati posisi yang sama di laman web.

Ini relatif mudah mengirim gambar ke latar belakang sekelompok teks, tetapi jika gambar itu terlalu terang, teks yang ada di atasnya cenderung membanjiri. Dalam kasus ini, langkah selanjutnya adalah mencoba membuat gambar kurang buram menggunakan properti opacity.

Satu-satunya masalah adalah karena gambar dan teks menempati posisi yang sama, teks juga akan menjadi agak transparan.

Salah satu dari beberapa cara efektif untuk mengatasi masalah ini adalah dengan menggunakan elemen semu sebelumnya.

Menggunakan Contoh Elemen Sebelum Pseudo

.halaman arahan{
/ * Mengatur teks pada hamparan gambar * /
tampilan: flex;
arah fleksibel: kolom;
justify-content: center;
sejajarkan-item: tengah;
text-align: center;
/ * menyetel halaman untuk menyesuaikan dengan ukuran layar yang berbeda * /
tinggi: 100vh;
}
.landingPage:: before {
kandungan:'';
/ * mengimpor gambar * /
background: url ( https://source.unsplash.com/_1EYIHRG014/1600x900)
pusat / penutup tanpa pengulangan;
/ * menempatkan overlay di atas gambar * /
opasitas: 0,4;
/ * membuat gambar terlihat * /
posisi: mutlak;
atas: 0;
kiri: 0;
lebar: 100%;
tinggi: 100%;
}

Kode di atas dibuat untuk digunakan bersamaan dengan kelas landingPage HTML di bawah ini. Seperti yang ditunjukkan pada kode di atas, dengan menggunakan elemen semu before kita dapat menargetkan gambar dan menggunakan properti opacity sebelum gambar digabungkan dengan teks.

Menggunakan elemen semu Before


Ini adalah hasil dari penggunaan pseudo-element before
untuk overlay dan gambar dengan teks yang dapat dibaca.

Ini akan menghasilkan overlay yang ditempatkan pada gambar dan teks yang jelas ditampilkan di atas, seperti yang ditunjukkan pada gambar di bawah ini:

Menggunakan After Pseudo-element di CSS

Penggunaan praktis untuk pseudo-element setelahnya adalah untuk membantu pembuatan formulir HTML. Sebagian besar formulir dibuat dengan sekumpulan bidang yang memerlukan data agar formulir berhasil dikirim.

Salah satu cara untuk menunjukkan bahwa bidang dalam formulir membutuhkan data adalah dengan menempatkan tanda bintang setelah label untuk bidang ini. Pseudo-element after menyediakan cara praktis bagi Anda untuk melakukan ini.

Menggunakan Contoh After Pseudo-element

.required:: after {
kandungan: '*';
warna merah;
} 

Memasukkan kode di atas ke dalam bagian CSS formulir Anda akan memastikan bahwa setiap label yang berisi kelas yang diperlukan akan langsung diikuti dengan tanda bintang merah. Pseudo-element setelahnya juga praktis dalam contoh ini karena membantu memisahkan gaya dari struktur (yang selalu ideal dalam pengembangan perangkat lunak.)

Properti Konten

Seperti yang ditunjukkan pada contoh elemen semu setelah di atas, properti konten adalah alat yang digunakan untuk memasukkan konten baru ke halaman web. Properti ini hanya digunakan dengan pseudo-elemen sebelum dan sesudah.

Penting untuk diperhatikan bahwa meskipun tidak ada konten yang tersedia untuk dijadikan umpan ke properti konten (seperti di contoh elemen semu sebelumnya di atas), Anda masih harus menggunakan properti konten dalam parameter elemen semu sebelum atau sesudah untuk membuatnya berfungsi sebagai dimaksudkan.

Sekarang Anda dapat Menggunakan Pseudo-elements di CSS

Di artikel ini, Anda telah mempelajari cara mengidentifikasi dan menggunakan elemen semu dalam program CSS Anda. Anda diperkenalkan dengan pseudo-elemen sebelum dan sesudah dan diberikan cara praktis untuk menggunakan keduanya. Anda juga dapat melihat mengapa properti konten diperlukan untuk keberhasilan penggunaan pseudo-elemen sebelum dan sesudah.

10 Contoh Kode CSS Sederhana yang Dapat Anda Pelajari dalam 10 Menit

Ingin tahu lebih banyak tentang menggunakan CSS? Cobalah contoh kode CSS dasar ini untuk memulai, lalu terapkan ke halaman web Anda sendiri.

Baca Selanjutnya

Tentang Penulis