CSS: Jak usunąć pseudoelementy (po, przed…)?

236

Chciałbym użyć przełącznika do układu znaczników akapitu na stronie internetowej.

Używam pseudoelementu po:

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

Teraz muszę usunąć ten kod CSS ze strony.

Jak można to łatwo zrobić?

Chcę dodać, że:

  • jQuery jest już używany na stronie

  • i nie chcę dołączać ani usuwać plików zawierających CSS.

Thariama
źródło

Odpowiedzi:

455
p:after {
   content: none;
}

none nie jest oficjalną wartością do ustawienia zawartości, jeśli jest określona, ​​na nic.

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

Gilly
źródło
2
Czy to faktycznie usuwa inne style związane z treścią, a więc nawet jeśli masz ustawione wypełnienia i marginesy, stają się obojętne?
Ryan Williams
To powinna być zaakceptowana odpowiedź. Korzystanie z treści: ''; może prowadzić do nieoczekiwanych wyników podczas próby zastąpienia wcześniej ustawionego atrybutu treści.
Roy Milder
Nie możesz po prostu zrobić display: none?
MDTech.us_MAN,
@ MDTech.us_MAN tak, możesz zrobić „display: none”, ale nadal będzie on zachowany w drzewie DOM. Ustawienie zawartości: żaden nawet nie umieszcza go w drzewie DOM (możesz to sprawdzić za pomocą inspektora DOM w Chrome)
kumarharsh
29

Musisz dodać regułę css, która usuwa zawartość końcową ( poprzez klasę ).


Zmiana z powodu pewnych ważnych uwag.

Bardziej poprawnym sposobem całkowitego usunięcia / wyłączenia :afterreguły jest użycie

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

jak odpowiedział Gillian Lo Wong .


Oryginalna odpowiedź

Musisz dodać regułę css, która usuwa zawartość końcową ( poprzez klasę ).

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

i dodaj tę klasę do swojej, pkiedy chcesz dzięki tej linii

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

działający przykład pod adresem : http://www.jsfiddle.net/G2czw/

Gabriele Petrioli
źródło
16
$('p:after').css('display','none');
Henrik Albrechtsson
źródło
8

Jak wspomniano w odpowiedzi Gillian , przypisanie nonedo contentrozwiązania problemu:

p::after {
   content: none;
}

Należy zauważyć, że w CSS 3 , W3C zaleca się stosowanie dwóch średników ( ::) dla pseudoelementów jak przed lub po tym .

Z dokumentu internetowego MDN na temat pseudoelementów

Uwaga: Z reguły ::należy stosować podwójne dwukropki ( ) zamiast pojedynczego dwukropka ( :). To odróżnia pseudoklasy od pseudoelementów. Ponieważ jednak to rozróżnienie nie występowało w starszych wersjach specyfikacji W3C, większość przeglądarek obsługuje obie składnie ze względu na kompatybilność. Pamiętaj, że ::selectionzawsze musi zaczynać się od podwójnych dwukropków ( ::).

simhumileco
źródło
5

Zależy to od tego, co faktycznie dodają pseudoselektory. W Twojej sytuacji ustawienie zawartości na ""pozbycie się jej, ale jeśli ustawiasz granice, tła lub cokolwiek innego, musisz je dokładnie wyzerować. O ile mi wiadomo, nie ma jednego lekarstwa na usunięcie wszystkiego przed / po elemencie, niezależnie od tego, co to jest.

rysowane www
źródło
0

miałem ten sam problem kilka minut temu i po prostu content:none;nie działałem, ale dodałem content:none !important;i display:none !important;działałem dla mnie

SkyRideR
źródło
-3
p:after {
  content: none;
}

Jest to sposób na usunięcie :afteri możesz zrobić to samo dla:before

Priyanka Choudhary
źródło
1
Ta odpowiedź wydaje się powtarzać to samo rozwiązanie, co obecnie przyjęte kilka lat temu. Jeśli uważasz, że masz coś do dodania, zostaw to jako komentarz do oryginalnej odpowiedzi. Alternatywnie, jeśli masz inne rozwiązanie, wyjaśnij, dlaczego jest ono inne (i być może lepsze).
MTCoster,