Akkordeon Pfeil verschiebt sich bei mehreren Zeilen

  • Guten Abend,

    ich bin gerade dabei einen kleinen Onlineshop mit Shopify zu eröffnen, und möchte HTML, CSS und JavaScript lernen um meinen Shop zu verbessern. Allerdings bin ich noch nicht so fortgeschritten und kann einige Sachen nicht selber lösen. Für meine FAQ Seite habe ich ein Akkordeon erstellt (

    ) und habe ein Problem. Ich habe Pfeil (Chevron) dass nach Rechts guckt, und wenn jemand diese Frage öffnet rotiert der Pfeil um 90° nach unten. Allerdings verschiebt sich der Pfeil auf wenn die Frage mehrer Zeilen lang ist (Vorallem auf Smartphones wo die Bildschirme nicht so breit sind) Könnte mir jemand sagen was ich am CSS verändern sollte, damit ich dieses Problem beheben kann? Ich konnte bisher keine Lösung finden.


    Hier der Fehler: https://gfycat.com/shortripeblackwidowspider


    Hier der Code: https://pastebin.com/MrAzu9LA



    Vielen vielen Dank im Voraus ^^

  • Tut mir Leid, hier ist der Code mit HTML: https://pastebin.com/FUMYAqEg

    Ich habe gerade transform-origin: 50% 50%; probiert aber das gleiche passiert immer noch.

    Wenn das Label mehrere Zeilen lang ist verschiebt sich der Pfeil. Je mehr Zeilen, desto größer die Verschiebung. :/

  • Anscheinend liegt es daran, dass sich die Höhe des Pseudoelementes vergrößert, da der Container ein display: flex; hat.

    Abhilfe durch:

    Code
    1. .faq .tab-label::after {
    2. content: '\276F';
    3. transition: all .4s;
    4. align-self: flex-start;
    5. }

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von Sempervivum ()