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 (

    Externer Inhalt www.youtube.com
    Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.
    Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.
    ) 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 ^^

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

    Abhilfe durch:

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

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!