Cara Menggunakan Elemen Pseudo Sebelum dan Selepas di CSS

Cara Menggunakan Elemen Pseudo Sebelum dan Selepas di CSS

Elemen semu adalah salah satu pemilih yang lebih maju yang boleh digunakan dalam CSS. Tujuan utama di sebalik pemilih ini adalah untuk membuat gaya yang unik, tanpa mengubah dokumen HTML yang digunakan untuk membuat struktur dasar halaman web tertentu.





Inilah cara menggunakan elemen pseudo dalam CSS.



permintaan untuk deskriptor peranti usb gagal

Elemen Pseudo biasa

Terdapat senarai unsur-unsur semu yang tersedia untuk menjadikan kehidupan pembangun web lebih mudah. Beberapa elemen pseudo ini merangkumi:





  • Sebelum
  • Selepas
  • Latar belakang
  • Barisan pertama
  • Surat pertama

Dalam situasi tertentu, beberapa elemen pseudo akan terbukti lebih sesuai daripada yang lain, tetapi satu perkara yang tetap berterusan adalah struktur umum untuk menggunakan unsur pseudo.

Contoh Struktur Pseudo-elemen


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

Walaupun anda dapat menggunakan elemen HTML sebagai pemilih, disarankan agar anda menggunakan kelas atau id untuk mengelakkan penyasaran elemen yang tidak diinginkan dalam tata letak anda. Elemen, gaya, atau data yang ingin anda masukkan pada kedudukan yang diinginkan harus diletakkan di antara pendakap keriting.



Elemen pseudo sebelum dan sesudah adalah yang paling popular dalam senarai, dan memandangkan terdapat banyak kaedah praktikal untuk menggunakannya - tidak sukar untuk mengetahui sebabnya.

Menggunakan elemen Before Pseudo dalam CSS

Walaupun tidak mustahil, sukar untuk meletakkan gambar dengan teks yang dapat dibaca dalam CSS. Ini kerana gambar dan teks akan menempati kedudukan yang sama di laman web.



Ia agak mudah untuk menghantar gambar ke latar belakang kumpulan teks , tetapi apabila gambar itu terlalu terang, ia cenderung membanjiri teks yang berada di atasnya. Dalam keadaan seperti ini, langkah seterusnya adalah berusaha menjadikan gambar kurang legap menggunakan sifat kelegapan.

Satu-satunya masalah adalah kerana gambar dan teks berada pada kedudukan yang sama teks juga akan menjadi agak telus.



Salah satu daripada beberapa kaedah berkesan untuk menyelesaikan masalah ini adalah dengan menggunakan elemen pseudo sebelumnya.

Menggunakan Contoh Elemen Sebelum Pseudo


.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%;
}

Kod di atas dibuat untuk digunakan secara serentak dengan kelas HTML landingPage di bawah. Seperti yang ditunjukkan dalam kod di atas, dengan menggunakan elemen pseudo sebelumnya kita dapat menargetkan gambar dan menggunakan sifat kelegapan 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 menyebabkan overlay diletakkan pada gambar dan teks yang jelas ditampilkan di atas, seperti yang ditunjukkan pada gambar di bawah:

Menggunakan elemen After Pseudo dalam CSS

Penggunaan praktikal untuk elemen pseudo selepas adalah untuk membantu dalam membuat bentuk HTML. Sebilangan besar borang dibuat dengan satu set bidang yang memerlukan data agar borang berjaya dihantar.

Salah satu cara untuk menunjukkan bahawa bidang dalam bentuk memerlukan data adalah dengan meletakkan tanda bintang selepas label untuk bidang ini. Elemen pseudo selepas menyediakan kaedah praktikal untuk anda melakukan ini.

Menggunakan Contoh After Pseudo-element


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

Memasukkan kod di atas ke bahagian CSS borang anda akan memastikan bahawa setiap label yang mengandungi kelas yang diperlukan akan diikuti langsung dengan tanda bintang merah. Elemen pseudo selepas ini juga praktikal dalam contoh ini kerana ia membantu memisahkan gaya dari struktur (yang selalu sesuai dalam pembangunan perisian.)

pesanan amazon mengatakan dihantar tetapi tidak diterima

Harta Kandungan

Seperti yang ditunjukkan dalam contoh elemen pseudo setelah di atas, sifat kandungan adalah alat yang digunakan untuk memasukkan kandungan baru ke laman web. Harta ini hanya digunakan dengan elemen pseudo sebelum dan sesudah.

Penting untuk diperhatikan bahawa walaupun tidak ada kandungan yang tersedia untuk dijadikan makanan ke kandungan kandungan (seperti pada contoh elemen pseudo sebelumnya di atas), anda masih diminta untuk menggunakan harta kandungan dalam parameter sebelum atau sesudahnya elemen pseudo untuk membuat mereka bekerja seperti yang diharapkan.

Sekarang Anda boleh Menggunakan elemen Pseudo dalam CSS

Dalam artikel ini, anda belajar bagaimana mengenal pasti dan menggunakan elemen pseudo dalam program CSS anda. Anda diperkenalkan dengan elemen pseudo sebelum dan sesudahnya dan diberi cara praktikal untuk menggunakan kedua-duanya. Anda juga dapat melihat mengapa harta kandungan diperlukan untuk kejayaan penggunaan elemen pseudo sebelum dan sesudah.

Berkongsi Berkongsi Tweet E-mel 10 Contoh Kod CSS Mudah yang Anda Boleh Pelajari dalam 10 Minit

Perlukan bantuan dengan CSS? Cubalah contoh kod asas CSS ini, kemudian gunakannya ke laman web anda sendiri.

Baca Seterusnya Topik-topik yang berkaitan
  • Pengaturcaraan
  • Reka Bentuk Web
  • CSS
Mengenai Pengarang Kadeisha Kean(21 Artikel Diterbitkan)

Kadeisha Kean adalah Pembangun Perisian Penuh dan Penulis Teknikal / Teknologi. Dia mempunyai kemampuan berbeza untuk menyederhanakan beberapa konsep teknologi yang paling kompleks; menghasilkan bahan yang dapat difahami dengan mudah oleh mana-mana pemula teknologi. Dia minat menulis, mengembangkan perisian yang menarik, dan menjelajah dunia (melalui dokumentari).

Lagi Dari Kadeisha Kean

Langgan buletin kami

Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!

Klik di sini untuk melanggan