Cara Menggunakan Elemen Sebelum dan Sesudah Pseudo di CSS

Elemen semu adalah salah satu penyeleksi tingkat lanjut yang tersedia untuk digunakan dalam CSS. Tujuan utama di balik penyeleksi ini adalah untuk membuat gaya yang unik, tanpa mengubah dokumen HTML yang digunakan untuk membuat struktur dasar halaman web tertentu.

Berikut cara menggunakan elemen semu dalam CSS.

cara mendapatkan kartu perdagangan uap dengan cepat

Elemen Pseudo Umum

Ada daftar lengkap elemen semu yang tersedia untuk membuat hidup seorang pengembang web lebih mudah. Beberapa elemen pseudo 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{  
/* css code */  
}

Meskipun Anda dapat menggunakan elemen HTML sebagai pemilih , disarankan agar Anda 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 kurung kurawal.

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

Menggunakan elemen Sebelum Pseudo di CSS

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

Hal ini relatif mudah untuk kirim gambar ke latar belakang sekelompok teks , tetapi jika gambar tersebut terlalu terang, gambar tersebut cenderung menutupi teks yang ada di atasnya. Dalam hal ini, langkah selanjutnya adalah mencoba membuat gambar tidak terlalu 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 sedikit cara efektif untuk menyelesaikan masalah ini adalah dengan menggunakan elemen pseudo before.

Menggunakan Contoh Elemen Pseudo Sebelum

  
.landingPage{  
/* Arranges the text on the image overlay */  
display: flex;  
flex-direction: column;  
justify-content: center;  
align-items: center;  
text-align: center;  
/*sets the page to adjust to different screen sizes*/  
height: 100vh;  
}  
.landingPage::before{  
content:'';  
/*imports an image*/  
background: url(https://source.unsplash.com/_1EYIHRG014/1600x900)  
no-repeat center/cover;  
/*places an overlay on top of the image*/  
opacity: 0.4;  
/*makes the image visible*/  
position: absolute;  
top: 0;  
left: 0;  
width: 100%;  
height: 100%;  
}

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

  
  
  
   
 This is the result of using the before pseudo-element  
 to overlay and image with readable text.

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

Menggunakan elemen After Pseudo di CSS

Penggunaan praktis untuk elemen pseudo 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 memerlukan data adalah dengan menempatkan tanda bintang setelah label untuk bidang ini. Elemen semu setelah menyediakan cara praktis bagi Anda untuk melakukan ini.

Menggunakan Contoh Elemen Pseudo Setelah

  
.required::after{  
content: '*';  
color: red;  
}

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

event id 41 kernel-power

Properti Konten

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

Penting untuk dicatat bahwa meskipun tidak ada konten yang tersedia untuk dijadikan umpan ke properti konten (seperti dalam contoh elemen semu sebelum di atas), Anda tetap harus menggunakan properti konten dalam parameter sebelum atau sesudah pseudo-element untuk membuatnya berfungsi sebagaimana dimaksud.

Sekarang Anda dapat Menggunakan elemen Pseudo di CSS

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

Membagikan Membagikan Menciak Surel 10 Contoh Kode CSS Sederhana yang Dapat Anda Pelajari dalam 10 Menit

Butuh bantuan dengan CSS? Cobalah contoh kode CSS dasar ini untuk memulai, lalu terapkan ke halaman web Anda sendiri.

Baca Selanjutnya Topik-topik yang berkaitan

Pemrograman
Desain web
CSS

Tentang Penulis Kadeisha Kean(21 Artikel Diterbitkan)

Kadeisha Kean adalah Pengembang Perangkat Lunak Full-Stack dan Penulis Teknis/Teknologi. Dia memiliki kemampuan yang berbeda untuk menyederhanakan beberapa konsep teknologi yang paling kompleks; menghasilkan materi yang dapat dengan mudah dipahami oleh setiap pemula teknologi. Dia bersemangat menulis, mengembangkan perangkat lunak yang menarik, dan berkeliling dunia (melalui film dokumenter).

Berlangganan newsletter kami

Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!

Klik di sini untuk berlangganan