CSS: Bagaimana menghapus elemen pseudo (setelah, sebelum, ...)?


236

Saya ingin menggunakan sakelar untuk tata letak tag paragraf di halaman web.

Saya menggunakan pseudoelement setelah:

p:after {content: url("../img/paragraph.gif");}

Sekarang saya perlu menghapus kode CSS ini dari halaman.

Bagaimana ini bisa dilakukan dengan mudah?

Saya ingin menambahkan itu:

  • jQuery sudah digunakan di halaman

  • dan saya tidak ingin memasukkan atau menghapus file yang mengandung CSS.


Jawaban:


455
p:after {
   content: none;
}

tidak ada nilai resmi untuk mengatur konten, jika ditentukan, menjadi nol.

http://www.w3schools.com/cssref/pr_gen_content.asp


2
Apakah ini benar-benar menghapus gaya terkait konten lainnya, sehingga bahkan jika Anda memiliki bantalan dan margin yang ditetapkan mereka menjadi lembam?
Ryan Williams

Ini harus menjadi jawaban yang diterima. Menggunakan konten: ''; dapat menyebabkan hasil yang tidak terduga ketika mencoba menimpa atribut konten yang ditetapkan sebelumnya.
Roy Milder

Tidak bisakah kamu melakukannya display: none?
MDTech.us_MAN

@ MDTech.us_MAN ya Anda bisa melakukan "display: none", tetapi masih akan dipertahankan di pohon DOM. Mengatur konten: tidak ada yang bahkan tidak meletakkannya di pohon DOM (Anda dapat memeriksanya melalui inspektur DOM Chrome)
kumarharsh

29

Anda perlu menambahkan aturan css yang menghapus konten setelahnya ( melalui kelas ) ..


Sebuah pembaruan karena beberapa komentar yang valid.

Cara yang lebih benar untuk menghapus / menonaktifkan :afteraturan sepenuhnya adalah dengan menggunakan

p.no-after:after{content:none;}

saat Gillian Lo Wong menjawab .


Jawaban asli

Anda perlu menambahkan aturan css yang menghapus konten setelahnya ( melalui kelas ) ..

p.no-after:after{content:"";}

dan tambahkan kelas itu ke Anda pketika Anda ingin dengan baris ini

$('p').addClass('no-after'); // replace the p selector with what you need...

contoh kerja di: http://www.jsfiddle.net/G2czw/



9

Seperti disebutkan dalam jawaban Gillian , menugaskan noneuntuk contentmemecahkan masalah:

p::after {
   content: none;
}

Perhatikan bahwa dalam CSS3 , W3C merekomendasikan untuk menggunakan dua titik dua ( ::) untuk elemen pseudo seperti ::beforeatau ::after.

Dari dokumen web MDN di Pseudo-elements :

Catatan: Sebagai aturan, dua titik ( ::) harus digunakan sebagai ganti satu titik dua ( :). Ini membedakan pseudo-class dari pseudo-elements. Namun, karena perbedaan ini tidak ada dalam versi W3C spec yang lebih lama, sebagian besar browser mendukung kedua sintaksis demi kompatibilitas. Perhatikan bahwa ::selectionharus selalu dimulai dengan titik dua ( ::).


5

Ini tergantung pada apa yang sebenarnya ditambahkan oleh pseudoselektor. Dalam situasi Anda, mengatur konten untuk ""akan menghilangkannya, tetapi jika Anda menetapkan batas atau latar belakang atau apa pun, Anda perlu membidiknya secara spesifik. Sejauh yang saya tahu, tidak ada satu obat untuk menghilangkan semua tentang elemen sebelum / sesudah terlepas dari apa itu.


0

punya masalah yang sama beberapa menit yang lalu dan content:none;tidak berfungsi tetapi menambah content:none !important;dan display:none !important;bekerja untuk saya


-3
p:after {
  content: none;
}

Ini adalah cara untuk menghapus :afterdan Anda dapat melakukan hal yang sama untuk:before


1
Jawaban ini tampaknya mengulangi solusi yang sama dengan yang diterima saat ini dari beberapa tahun yang lalu. Jika Anda merasa memiliki sesuatu untuk ditambahkan, silakan tinggalkan itu sebagai komentar pada jawaban asli. Atau jika Anda memiliki solusi yang berbeda, tolong jelaskan mengapa itu berbeda (dan mungkin lebih baik).
MTCoster
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.