CSS: Wie entferne ich Pseudoelemente (nach, vor, ...)?

235

Ich möchte einen Schalter für das Layout von Absatz-Tags auf einer Webseite verwenden.

Ich benutze das After-Pseudoelement:

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

Jetzt muss ich diesen CSS-Code von der Seite entfernen.

Wie kann das leicht gemacht werden?

Ich möchte das hinzufügen:

  • jQuery wird bereits auf der Seite verwendet

  • und ich möchte keine Dateien einschließen oder entfernen, die CSS enthalten.

Thariama
quelle
Mögliches Duplikat der Manipulation von CSS-
Pseudoelementen

Antworten:

454
p:after {
   content: none;
}

none ist der offizielle Wert, um den Inhalt, falls angegeben, auf nichts zu setzen.

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

Gilly
quelle
2
Löscht dies tatsächlich andere inhaltsbezogene Stile, sodass sie inert werden, selbst wenn Sie Auffüllungen und Ränder festgelegt haben?
Ryan Williams
Dies sollte die akzeptierte Antwort sein. Verwenden von Inhalten: ''; Dies kann zu unerwarteten Ergebnissen führen, wenn versucht wird, ein zuvor festgelegtes Inhaltsattribut zu überschreiben.
Roy Milder
Kannst du nicht einfach tun display: none?
MDTech.us_MAN
@ MDTech.us_MAN Ja, Sie können "display: none" ausführen, es wird jedoch weiterhin im DOM-Baum beibehalten. Festlegen von Inhalten: Keiner fügt sie nicht einmal in den DOM-Baum ein (Sie können sie über den DOM-Inspektor von Chrome überprüfen)
kumarharsh
29

Sie müssen eine CSS-Regel hinzufügen, die den After-Inhalt ( über eine Klasse ) entfernt.


Ein Update aufgrund einiger gültiger Kommentare.

Die korrektere Methode zum vollständigen Entfernen / Deaktivieren der :afterRegel ist die Verwendung

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

als Gillian Lo Wong antwortete .


Ursprüngliche Antwort

Sie müssen eine CSS-Regel hinzufügen, die den After-Inhalt ( über eine Klasse ) entfernt.

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

und fügen Sie diese Klasse zu Ihrer hinzu, pwenn Sie mit dieser Zeile möchten

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

Ein funktionierendes Beispiel unter: http://www.jsfiddle.net/G2czw/

Gabriele Petrioli
quelle
16
$('p:after').css('display','none');
Henrik Albrechtsson
quelle
8

Wie in Gillians Antwort erwähnt , löst das Zuweisen nonevon contentdas Problem:

p::after {
   content: none;
}

Man beachte , dass in CSS3 , W3C zwei Doppelpunkte zu verwenden empfohlen ( ::) für pseudo-Elemente wie vor oder nach .

Aus dem MDN-Webdokument zu Pseudoelementen

Hinweis: In der Regel sollten doppelte Doppelpunkte ( ::) anstelle eines einzelnen Doppelpunkts ( :) verwendet werden. Dies unterscheidet Pseudoklassen von Pseudoelementen. Da diese Unterscheidung jedoch in älteren Versionen der W3C-Spezifikation nicht vorhanden war, unterstützen die meisten Browser aus Gründen der Kompatibilität beide Syntaxen. Beachten Sie, dass ::selectionimmer mit Doppelpunkten ( ::) beginnen muss.

simhumileco
quelle
5

Dies hängt davon ab, was tatsächlich von den Pseudoselektoren hinzugefügt wird. In Ihrer Situation wird das Festlegen von Inhalten auf ""diese entfernt, aber wenn Sie Rahmen oder Hintergründe oder was auch immer festlegen, müssen Sie diese speziell auf Null setzen. Soweit ich weiß, gibt es kein Allheilmittel, um alles an einem Vorher / Nachher-Element zu entfernen, unabhängig davon, was es ist.

zogww
quelle
0

hatte vor ein paar Minuten das gleiche Problem und hat einfach content:none;nicht gearbeitet, sondern hinzugefügt content:none !important;und display:none !important;für mich gearbeitet

SkyRideR
quelle
-3
p:after {
  content: none;
}

Dies ist eine Möglichkeit, das zu entfernen, :afterund Sie können das Gleiche für tun:before

Priyanka Choudhary
quelle
1
Diese Antwort scheint dieselbe Lösung zu wiederholen wie die derzeit akzeptierte vor einigen Jahren. Wenn Sie das Gefühl haben, etwas hinzuzufügen, hinterlassen Sie es bitte als Kommentar zur ursprünglichen Antwort. Wenn Sie eine andere Lösung haben, erklären Sie bitte, warum diese anders (und möglicherweise besser) ist.
MTCoster