Ich wechselte zu einem neuen Computer, und plötzlich funktionieren die CSS :after und :before Selektoren nicht mehr.
Was wirklich bizarr ist, ist, dass die :before/:after Selektoren, die ich zuvor hinzugefügt habe, auf meinem anderen Computer ganz normal auf meinem neuen Computer angezeigt werden. Aber alle neuen, die ich jetzt hinzufüge, erscheinen einfach nicht, selbst wenn ich den alten Code auf ein neues div kopieren und einfügen würde.
Zum Beispiel:
html
%Vor%css
%Vor%Dieser Code funktioniert, wenn er direkt in eine Geige kopiert und eingefügt wird: ( Ссылка ), aber nur die rote Box wird in meinem lokalen Browser angezeigt. Egal was ich mache, die blaue Box wird nicht angezeigt. Alle anderen CSS verhält sich normal.
Weiß jemand, was ich falsch machen könnte?
Getestet auf Mozilla 35.0.1 und Chrome 42.0.2311.152 (64-Bit) unter Ubuntu 14.04. Ich kann es nicht mehr auf meinem alten Computer testen, weil es kaputt gegangen ist, aber ich hatte nie Probleme mit :before/:after selectors zuvor.
Ich habe die Selektoren gerade bei meinem Inspektor gefunden. Sie werden normalerweise normal angezeigt, aber sie werden relativ zu html und nicht zu ihrem übergeordneten div positioniert. Auch hier, mit dem Code, den ich vor dem Computerwechsel hinzugefügt habe, sind die :before/:after Selektoren relativ zum übergeordneten div positioniert. Der neue Code positioniert die Selektoren jedoch, auch wenn er kopiert und eingefügt wird, relativ zum html . Warum sollte das sein?
position haben
Absolut positionierte Elemente werden "an einer bestimmten Position relativ zu ihrem nächstliegenden Vorfahren oder dem umgebenden Block positioniert". (src: MDN )
Ihr :after Pseudo-Element ist also nicht von seinem Elternteil enthalten, weil das Elternteil nicht "positioniert" ist oder seine Position auf static gesetzt ist.
Die einzige Erklärung ist, dass es in Ihrem vorherigen Setup etwas gegeben haben musste, das position auf #wtf anwendete, wodurch das Kind absolut in ihm positioniert werden konnte.
Sie können das Problem beheben, indem Sie die Position auf #wtf wie folgt anwenden:
Es stellt sich heraus, dass es nichts mit dem Computerwechsel zu tun hat. Die :before/:after selectors werden zwar angezeigt, aber sie werden relativ zum html positioniert, nicht zum übergeordneten div, weil die übergeordneten divs absolut positioniert sind.
Tags und Links html css css3 pseudo-element