CSS's ::before dan ::after Pseudo-Elements membolehkan anda menggunakan sebarang elemen bukan pengganti (contohnya, mereka sesuai untuk<div> Tetapi tidak berkenaan<code><img alt="7 Kegunaan Praktikal untuk :: Sebelum dan :: Selepas Pseudo-Elements di CSS" > ) Masukkan "kandungan" sebelum dan selepas. Ini sebenarnya membolehkan anda memaparkan kandungan pada halaman web yang mungkin tidak wujud dalam kandungan HTML. Anda tidak boleh menggunakannya untuk kandungan sebenar kerana ia tidak begitu baik dari segi kebolehcapaian, kerana anda tidak boleh memilih dan menyalin teks yang dimasukkan pada halaman dengan cara ini - ia hanya kandungan hiasan. Dalam artikel ini, saya akan membimbing anda melalui tujuh contoh yang berbeza yang menunjukkan cara membuat kesan menarik menggunakan ::before dan ::after .
Perhatikan bahawa untuk kebanyakan contoh, saya hanya menerangkan bahagian kod yang sangat berkaitan dengan unsur-unsur pseudo CSS. Iaitu, jika anda ingin melihat gaya kod lain, semua CSS dimasukkan ke dalam demo tertanam.
Apabila pengguna melawat laman web anda, sambungan internet mereka (atau faktor di luar kawalan anda) boleh menghalang imej anda daripada dimuat turun, jadi penyemak imbas memaparkan ikon imej yang rosak dan teks alternatif untuk imej (jika ada).
Bagaimana cara menggunakan ruang letak tersuai? Anda boleh melakukan ini dengan menggunakan ::before dan ::after dan beberapa kedudukan CSS.
Pertama, kita perlu menggunakan kedudukan relatif pada elemen imej. Kami akan menggunakan kedudukan mutlak pada salah satu elemen pseudo kemudian, jadi kedudukan relatif ini memastikan bahawa elemen pseudo berada dalam kandungan elemen imej, dan bukannya sepenuhnya keluar dari aliran dokumen.
img {
paparan: blok; /*Elakkan ruang di bawah imej yang disebabkan oleh ketinggian baris*/
Kedudukan: Relatif;
Lebar: 100%;
} Seterusnya, mari kita gunakan ::before pseudo-elemen imej untuk mewujudkan kawasan yang merosakkan kesan imej. Kami akan gaya pertama dengan latar belakang kelabu muda dan sempadan yang lebih gelap.
img :: sebelum {
latar belakang warna: HSL (0, 0%, 93.3%);
Sempadan: 1px HSL (0, 0%, 66.7%);
/ * ... */
}<img alt="7 Kegunaan Praktikal untuk :: Sebelum dan :: Selepas Pseudo-Elements di CSS" > adalah elemen pengganti. Mengapa menggunakan ::before pseudo-elemen di atasnya? Ia tidak berfungsi! betul. Dalam kes ini, apabila imej gagal dimuatkan, elemen pseudo akan dipaparkan di Chrome dan Firefox, yang betul-betul apa yang anda inginkan. Sementara itu, Safari hanya memaparkan gaya yang digunakan untuk teks alternatif.
Gaya ini berlaku ke sudut kiri atas imej yang rosak.
Setakat ini, semuanya berjalan lancar. Sekarang kita boleh menetapkannya ke elemen peringkat blok ( display: block ) dan memberikan ketinggian untuk mengisi seluruh ruang yang ada.
img :: sebelum {
/ * ... */
paparan: blok;
Ketinggian: 100%;
}Kita dapat meningkatkan gaya lagi. Sebagai contoh, mari kita mengelilingi sudut. Kita juga harus meninggalkan ruang untuk teks alternatif dengan menyediakan kedudukan penuh dan kedudukan mutlak untuk unsur-unsur pseudo untuk mengawal penempatan kandungan yang lebih baik di mana kita menginginkannya.
img :: sebelum {
/ * ... */
Radius sempadan: 4px;
Kandungan: "";
Kedudukan: Mutlak;
Lebar: 100%;
}Jika anda berhenti di sini dan periksa kerja anda, anda boleh menggaru kepala anda kerana teks alternatif tiba -tiba hilang.
Ini kerana kami menetapkan content ke rentetan kosong (kami perlu memaparkan kandungan dan gaya yang kami hasilkan) dan menimpa seluruh ruang, termasuk teks alternatif sebenar. Di sana, kita tidak dapat melihatnya.
Kita boleh memaparkan teks alternatif dengan penggantian (mendapatkannya?), Kali ini dengan bantuan ::after Pseudo-Element. Atribut content sebenarnya boleh menggunakan fungsi attr() untuk memaparkan teks atribut alt imej:
img :: selepas {
Kandungan: attr (alt);
/*Beberapa gaya mudah*/
Font-Weight: Bold;
Kedudukan: Mutlak;
Ketinggian: 100%;
Kiri: 0px;
Teks-Align: Pusat;
Atas: 1px;
Lebar: 100%;
}Ini hebat! Sekurang -kurangnya dalam krom.
Walau bagaimanapun, ini tidak berlaku di Firefox.
Penyelesaian cepat adalah menggunakan pemilih harta (dalam kes ini img[alt] ) untuk terus mencari atribut alt dan meletakkan gaya serupa di sana untuk memadankan Chrome.
img [alt] {
Teks-Align: Pusat;
Font-Weight: Bold;
Warna: HSL (0, 0%, 60%);
}Sekarang kita mempunyai tempat yang sangat baik yang konsisten dalam Chrome dan Firefox.
Blok petikan adalah petikan atau petikan daripada kerja. Mereka juga memberikan peluang yang sangat baik untuk memecahkan dinding teks dengan kandungan visual yang menarik.
Terdapat pelbagai cara untuk rujukan blok gaya. Chris mempunyai set lima gaya yang bermula pada tahun 2007.
Saya mahu melihat teknik lain, yang menggabungkan ::before dan ::after . Seperti yang kita lihat dalam contoh terdahulu, kita boleh menggunakan harta content untuk memaparkan kandungan yang dihasilkan dan memohon sifat lain untuk menghiasnya. Mari letakkan petikan besar pada awal dan akhir rujukan blok.
HTML adalah mudah:
<blockquote> </blockquote>
Beberapa hiasan di CSS:
blockquote {
gaya font: italic;
Talian ketinggian: 1.618;
saiz font: 1.2EM;
lebar: 30EM;
Kedudukan: Relatif;
Padding: 40px 80px;
} Perhatikan position: relative di dalamnya, kerana seperti yang anda akan belajar, ia adalah penting untuk rujukan blok kedudukan.
Seperti yang anda fikirkan, kami akan menggunakan ::before untuk petikan pertama dan ::after untuk petikan akhir. Sekarang kita hanya boleh memanggil harta content pada kedua -duanya dan menghasilkan tag di dalamnya. Walau bagaimanapun, CSS memberikan kami nilai-nilai open-quote dan close-quote .
blockquote :: sebelum {
Kandungan: Open-Quote;
/*Letakkan di sudut kiri atas*/
Atas: 0;
Kiri: 0;
}
blockquote :: selepas {
Kandungan: Tutup-Quote;
/*Letakkan di sudut kanan bawah*/
Bawah: 0;
Kanan: 0;
}Ini memberi kita petikan yang kita mahu, tetapi saya membenarkan saya menyusun gaya sedikit:
blockquote :: sebelum ini,
blockquote :: selepas {
latar belakang warna: #cccccccc;
paparan: blok;
lebar: 60px;
Ketinggian: 60px;
Talian ketinggian: 1.618;
saiz font: 3EM;
Radius sempadan: 100%;
Teks-Align: Pusat;
Kedudukan: Mutlak;
} Kami mempunyai pesanan di HTML (<ol></ol> ) dan gangguan (<ul></ul> ) Senarai. Kedua -duanya mempunyai gaya lalai yang ditentukan oleh stylesheet ejen pengguna penyemak imbas. Walau bagaimanapun, dengan menggunakan ::before pseudo-element, kita boleh mengatasi gaya "lalai" ini dengan kandungan kita sendiri. Tebak apa? Kita boleh menggunakan emojis (?) Pada harta content !
.Name-list li :: sebelum {
Kandungan: "?";
margin-kanan: 15px;
saiz font: 20px;
} Walaupun ini bagus, perlu diperhatikan bahawa kita sebenarnya boleh menggunakan ::marker pseudo-unsur, yang khusus digunakan untuk penanda senarai gaya. Eric Meyer menunjukkan kepada kita bagaimana ia berfungsi, yang mungkin menjadi pendekatan yang lebih baik dalam jangka masa panjang.
Salah satu helah yang paling bijak untuk gaya bentuk adalah untuk membuat suis togol menggunakan kotak semak HTML standard. Malah, Preethi Sam baru -baru ini berkongsi cara apabila menunjukkan beberapa tips gaya kotak semak yang lain menggunakan topeng CSS.
Seperti namanya, suis togol digunakan untuk bertukar -tukar atau menukar elemen kotak semak yang dipilih dan tidak dipilih.
<label> <input type="checkbox"> </label>
Semua penyesuaian akan ditambah kepada ::before dan ::after unsur-unsur pseudo<label></label> Pengubahsuaian elemen. Tetapi pertama, inilah beberapa<label></label> CSS asas untuk elemen:
.container {
Latar Belakang: #212221;
Latar Belakang: Linear-Gradient (ke kanan, #1560BD, #E90);
Radius sempadan: 50px;
Ketinggian: 40px;
Kedudukan: Relatif;
lebar: 75px;
}Kami akan menyembunyikan penampilan lalai kotak semak semasa mengambil semua ruang. Pelik? Ia tidak dapat dilihat, tetapi secara teknikal masih wujud. Kami melakukan ini dengan:
input {
-Webkit-appearing: Tiada; / * Safari */
kursor: penunjuk; /*Tunjukkan ia adalah elemen interaktif*/
Ketinggian: 100%;
Kedudukan: Mutlak;
Lebar: 100%;
} Sekarang mari kita gunakannya ::before tetapan Pseudo-Element<input> Gaya elemen. Gaya ini akan mengubah penampilan input, membawa kita lebih dekat kepada hasil akhir.
input :: sebelum {
Latar Belakang: #ffff;
Radius sempadan: 50px;
Kandungan: "";
Ketinggian: 70%;
Kedudukan: Mutlak;
Atas: 50%;
Transform: Terjemahan (7px, -50%); /*Bergerak gaya ke pusat elemen*/
lebar: 85%;
} Apa, tunggu? Anda mungkin berfikir bahawa ::before tidak berfungsi dengan elemen pengganti, mis.<input> . Ini betul, tetapi hanya jika jenis input adalah imej, ini bersamaan dengan<img alt="7 Kegunaan Praktikal untuk :: Sebelum dan :: Selepas Pseudo-Elements di CSS" > elemen. Kawalan bentuk lain (seperti kotak semak) ditakrifkan sebagai elemen bukan penggantian dalam spesifikasi HTML.
Seterusnya, kita perlu membuat butang "togol", yang berlaku bahawa kita masih boleh membuat menggunakan ::after pseudo-element. Walau bagaimanapun, terdapat dua mata yang patut disebut:
transform untuk bergerak ke<input> pusat. input :: selepas {
Latar Belakang: Linear-Gradient (ke kanan, oren, #8E2DE2);
Radius sempadan: 50px;
Kandungan: "";
Ketinggian: 25px;
Kelegapan: 0.6;
Kedudukan: Mutlak;
Atas: 50%;
Transform: Terjemahan (7px, -50%);
Peralihan: Semua .4s;
lebar: 25px;
} Cuba klik butang togol. Tidak ada yang berlaku. Ini kerana kita sebenarnya tidak berubah<input> status terpilih. Walaupun kita mengubahnya, hasilnya ... tidak menyenangkan.
Penyelesaiannya adalah untuk memohon :checked ke<input> :: ::after Pseudo-Element. Dengan secara khusus meletakkan keadaan pilihan kotak semak dan menghubungkannya dengan ::after Pseudo-Element, kita boleh memindahkan butang togol kembali ke kedudukan asalnya.
input: diperiksa :: selepas {
Kelegapan: 1;
Transform: Terjemahan (170%, -50%);
} Kami boleh menghiasi imej dengan sempadan untuk menjadikannya menonjol atau menggabungkan lebih lancar ke dalam reka bentuk. Adakah anda tahu kita boleh menggunakan kecerunan di sempadan? Nah, kita boleh menggunakan ::before (dan sudah tentu ada cara lain).
Idea teras adalah untuk mewujudkan kecerunan pada imej dan menggunakan atribut CSS z-index dan nilai negatif. Nilai negatif tarik kecerunan di bawah imej dalam susunan susunan. Ini bermakna imej sentiasa dipaparkan di atas selagi kecerunan mempunyai z-index negatif.
.Gradient-Sorder :: Sebelum {
/*Memberi gaya*/
Kandungan: "";
/*Isi seluruh ruang*/
Kedudukan: Mutlak;
Atas: 0;
Kiri: 0;
Bawah: 0;
Kanan: 0;
/*Buat kecerunan*/
Latar Belakang-imej: Linear-Gradient ( #1A1A1A, #1560BD);
/*Tumpukan kecerunan di belakang imej*/
Z -indeks: -1;
}
Rajah {
/*Padamkan margin lalai*/
Margin: 0;
/*Memerah imej untuk memaparkan kecerunan di belakangnya*/
Padding: 10px;
}Ini sama dengan apa yang kita lakukan dalam contoh terdahulu, tetapi di sini kita menggunakan kecerunan di bahagian atas imej. Mengapa kita melakukan ini? Ia boleh menjadi cara yang baik untuk menambah beberapa tekstur dan kedalaman ke imej. Sebagai alternatif, jika terdapat teks di bahagian atas yang memerlukan kontras tambahan untuk meningkatkan kebolehbacaan, ia boleh digunakan untuk mencerahkan atau menggelapkan imej.
Walaupun ini serupa dengan apa yang kami lakukan, anda akan melihat beberapa perbezaan yang jelas:
Rajah :: Sebelum {
Imej latar belakang: Gradien linear (ke kanan atas, #1A1A1A, telus);
Kandungan: "";
Ketinggian: 100%;
Kedudukan: Mutlak;
Lebar: 100%;
} Adakah anda pernah melihatnya? Tidak ada z-index kerana ia adalah OK untuk menyusun kecerunan di atas imej. Kami juga memperkenalkan ketelusan ke dalam kecerunan latar belakang, yang membolehkan imej dipaparkan melalui kecerunan. Anda tahu, seperti superposisi.
Kebanyakan, jika tidak semua, kami cuba menyesuaikan gaya lalai butang radio HTML, yang biasanya dilakukan dengan ::before dan ::after , seperti yang kita lakukan dengan kotak semak sebelum ini.
Kami mula -mula menetapkan beberapa gaya asas, hanya untuk menyediakan:
/*Pusat semua kandungan*/
.flex-center {
Align-item: pusat;
Paparan: Flex;
Justify-Content: Center;
}
/*Gaya elemen bentuk*/
.form {
Latar Belakang: #CCC;
Ketinggian: 100VH;
Lebar: 100%;
}
/*Memasuki gaya*/
.Form-row {
Latar Belakang: #ffff;
Radius sempadan: 50px;
Ketinggian: 40px;
Margin: 10px;
Limpahan: Tersembunyi;
Kedudukan: Relatif;
lebar: 150px;
} Sekarang mari kita gunakan appearance: none; Untuk memadam gaya lalai butang radio:
.Form-Input {
-Webkit-appearing: Tiada; / * Safari */
Penampilan: Tiada;
} ::before harus berada di sudut kiri atas butang radio, dan apabila dipilih, kita akan menukar warna latar belakangnya.
.Form-Input :: Sebelum {
/*Memberi gaya*/
Kandungan: '';
/*Tunjukkan ia interaktif*/
kursor: penunjuk;
/*Letakkannya ke sudut kiri atas input*/
Kedudukan: Mutlak;
Atas: 0;
Kiri: 0;
/*Menduduki seluruh ruang*/
Ketinggian: 100%;
Lebar: 100%;
}
/*Apabila input dipilih ...*/
.Form-Input: diperiksa :: Sebelum {
/*Tukar warna latar*/
Latar Belakang: #21209C;
} Kami masih perlu menggunakan ::after menyelesaikan beberapa masalah. Khususnya, apabila butang radio dipilih, kami ingin menukar warna cincin bulat menjadi putih kerana dalam keadaan semasa cincin berwarna biru.
.Form-Input :: Selepas {
/*Memberi gaya*/
Kandungan: '';
/*Tunjukkan ia interaktif*/
kursor: penunjuk;
/*Beberapa gaya sempadan*/
Radius sempadan: 50px;
Sempadan: 4PX Solid #21209C;
/*Cincin kedudukan*/
Kedudukan: Mutlak;
Kiri: 10%;
Atas: 50%;
Transform: Terjemahan (0, -50%);
/*Set saiz*/
Ketinggian: 15px;
lebar: 15px;
}
/*Apabila input dipilih ...*/
.Form-Input: diperiksa :: selepas {
/*Tukar sempadan :: selepas putih*/
Sempadan: 4px pepejal #ffffff;
}Tag borang masih tidak tersedia di sini. Kita perlu secara langsung mencari label borang untuk menambah warna, dan apabila input borang dipilih, kita menukar warna ke warna yang kelihatan.
.form-label {
Warna: #21209C;
saiz font: 1.1rem;
margin-kiri: 10px;
} Klik butang dan masih tiada apa -apa untuk bertindak balas. Apa yang berlaku? position: absolute pada ::before dan ::after mengaburkan kandungan apabila butang radio dipilih, kerana apa -apa yang berlaku dalam hierarki dokumen HTML dikaburkan kecuali mereka dipindahkan ke lokasi baru dalam dokumen HTML, atau lokasi mereka telah diubah menggunakan CSS. Oleh itu, setiap kali butang radio dipilih, labelnya ditimpa.
Anda mungkin sudah tahu bagaimana menyelesaikan masalah ini, kerana kami menyelesaikan masalah yang sama dalam contoh lain sebelum ini? Kami memohon z-index: 1 (atau position: absolute ) untuk membentuk tag.
.form-label {
Warna: #21209C;
saiz font: 1.1rem;
margin-kiri: 10px;
Z-indeks: 1; /*Pastikan label disusun di atas*/
/* Kedudukan: mutlak; Ini adalah pilihan alternatif*/
} Kami telah meliputi tujuh cara yang berbeza untuk membuat kesan yang menarik menggunakan ::before dan ::after unsur-unsur pseudo, menyesuaikan gaya lalai, membuat tempat letak berguna, dan menambah sempadan ke imej.
Kami tidak semestinya meliputi semua kemungkinan yang boleh dikunci apabila memanfaatkan unsur -unsur lain yang boleh dipilih menggunakan CSS. Walau bagaimanapun, Lynn Fisher telah menjadikannya hobi, menggunakan elemen tunggal untuk membuat reka bentuk yang menakjubkan. Dan jangan lupa seni CSS Diana Smith, yang menggunakan unsur-unsur pseudo di pelbagai tempat untuk kesan lukisan yang realistik.
Atas ialah kandungan terperinci 7 Kegunaan Praktikal untuk :: Sebelum dan :: Selepas Pseudo-Elements di CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
pangkalan data pemulihan MySQL
Apakah rangka kerja musim bunga?
Bagaimana untuk membuka kunci sekatan kebenaran android
Bahasa C untuk mencari gandaan sepunya terkecil
Apakah kelekitan pengguna
Apakah kod ruang dalam html
penggunaan arahan kepala
Tujuan peringkat
Apakah perbezaan utama antara linux dan windows
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
