Hallo Gunnar,

boah ey, ist der Firefox hier kaputt. Ich wollte das Ganze als Polyfill schreiben, der nur aktiv ist, wenn das name-Attribut nicht wirkt (was natürlich ein Risiko ist, denn man weiß ja nicht, ob der FF diesen ::after-Bug fixt bevor sie das name-Attribut implementieren).

Also habe ich die details-Elemente mit names versehen (natürlich unterschiedliche für die beiden Songs) und dieses Script gesetzt:

    (function polyfillNameDetails() {
      const namedDetails = document.querySelectorAll('details[name]');
      if (namedDetails.length > 0 && namedDetails[0].name) return;

      function toggleNamedDetails(event) {
        let isOpen = event.newState == 'open';
        let selectName = `[name='${CSS.escape(event.target.getAttribute("name"))}']`;
        let detailsContainer = event.target.closest(".has-multiple-details");
        if (isOpen) {
          detailsContainer.classList.add("has-open-details");
          for (let sibling of document.body.querySelectorAll(`details${selectName}`)) {
            if (sibling != event.target) {
              sibling.open = false;
            }
          };
        }
        else if (!document.body.querySelector(`details${selectName}[open]`)) {
          detailsContainer.classList.remove("has-open-details");
        }
      }
      
      for (let detail of namedDetails) {
        detail.addEventListener("toggle", toggleNamedDetails);
      }
    })();

Damit verschwindet die has-open-details Klasse korrekt wieder. Und damit es auch ohne Polyfill geht, habe ich den Selektor für das ::after Element so gebaut:

  &:is(:has(details[open]), .has-open-details)::after {
    ...
  }

Aber nada, das versteht der Fuchs nicht. Chrome schon. Der Fuchs braucht es so:

  &:has(details[open])::after,
  &.has-open-details::after {
    ...
  }

Damit geht es dann bei mir.

Rolf