2002Andreas Mir ist da gerade etwas eingefallen: Du hast für den Selektor #searchmode-switcher-icon die Eigenschaft visibility: hidden verwendet. Irgendwie ist mir, dass diese Eigenschaft im Gegensatz zu display: none im Zusammenspiel mit ::before bzw. ::after nicht den Platz für das ersetzende Element freigibt.
Adressleiste mit Suchfunktion statt mit Weltkugel
-
Mr. Cutty -
24. Juni 2025 um 20:50 -
Erledigt
-
-
Mein Fehler, hatte das Problem missverstanden, sorry.
-
Irgendwie ist mir, dass diese Eigenschaft im Gegensatz zu display: none im Zusammenspiel mit ::before bzw. ::after nicht den Platz für das ersetzende Element freigibt.
Das ist unabhängig von ::before und ::after, aber ja, das ist der Unterschied zwischen display: none und visibility: hidden.
-
visibility: hidden verwendet.
Hallo milupo.
Ich hatte den Code hier erst etwas anders erstellt, dafür brauchte ich das.
Später dann aber vergessen es auf none umzustellen.
Letztlich funktioniert es aber jetzt auch mit none, dann müssen nur hier die Werte angepasst werden:
-
Ich hatte den Code hier erst etwas anders erstellt, dafür brauchte ich das.
Ich habe da nichts getestet, aber es hätte ja mit visibility: hidden einen ungewollten freien Raum geben können.
-
.... die Eigenschaft visibility: hidden verwendet. Irgendwie ist mir, dass diese Eigenschaft im Gegensatz zu display: none im Zusammenspiel mit ::before bzw. ::after nicht den Platz für das ersetzende Element freigibt.
Ist schon etwas älter und allgemeiner, aber im Prinzip so etwas.
Wie erwähnt von Sören, hat es nix mit Pseudoelementen zu tun.
Für Animation und Funktionalität gibt's auch die im Link beschriebenen zusätzlichen Unterschiede zw. display, visibility und opacity.
opacity macht zumindest auf meinem System ab und zu Ärger, weil nicht hardware-beschleunigt, aber selten.Dann noch fill-opacity für kompatible .svg Icons wie Fx Icons, ein paar color(-mix) Optionen, das evtl., plus filter - für Profis.
