Accordion - Adjust Marker

With just a little CSS, you can alter the appearance of the ::marker.

Demo
HTML
CSS
JS
Baseline
CodePen

Demo

Initially closed, click to open, note summary "marker" is animated

This content is initially hidden, but is revealed by clicking the summary.
Opening and closing animates the '➔' marker.

HTML

<!-- No special HTML, adjust the `::marker` appearance via CSS -->
<details>
  <summary>Initially closed, click to open, note <code>summary</code> "marker" is animated</summary>
  <p>This content is initially hidden, but is revealed by clicking the summary.<br>Opening and closing animates the '➔' marker.</p>
</details>

CSS

details {
  & summary::marker {
    content: none; /* Hide default marker for Modern browsers */
  }
  & summary {
    list-style: none; /* Hide default marker for older WebKit browsers */
    position: relative; /* Set positioning context for custom marker below */
    padding-inline-start: 1.5rem; /* Adust for your layout */
    &::before {
      content: '➔'; /* Replace default marker so it can be animated */
      position: absolute;
      inset-inline-start: 0.5rem; /* Adust for your layout */
      font-size: 0.8em; /* Adust for your layout */
      @media (prefers-reduced-motion: no-preference) { /* Be nice to others */
        transition: rotate 0.25s ease-in;
      }
    }
    [open] &::before {
      rotate: 90deg; /* Simple rotation to indicate panel is open */
    }
  }
}

JS

No JS required.

Baseline

[`details`](https://webstatus.dev/features/details)

[`marker`](https://webstatus.dev/features/marker)

CodePen

See the Pen on CodePen.