26 CSS Accordions — Vertical & Horizontal

Underline Reveal

Vertical accordion with a left-anchored underline that grows across the open trigger.

Pure CSS MIT licensed

Underline Reveal the 1st of 26 designs in the 26 CSS Accordions — Vertical & Horizontal collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.

Live preview

Open in playground

The code

<details class="acc-uline" name="acc-uline" open>
  <summary>What is CodeFronts?</summary>
  <p>
    A library of hand-crafted CSS components, generators and tools for developers who care about
    craft.
  </p>
</details>
<details class="acc-uline" name="acc-uline">
  <summary>Is everything free?</summary>
  <p>Yes — MIT licensed for personal and commercial projects, no attribution required.</p>
</details>
<details class="acc-uline" name="acc-uline">
  <summary>Does it use any frameworks?</summary>
  <p>No frameworks, no dependencies. Vanilla HTML, CSS and a tiny bit of JS where needed.</p>
</details>

.acc-uline { border-bottom: 1px solid rgba(156,123,214,0.18); }
.acc-uline summary {
  position: relative; cursor: pointer; list-style: none;
  padding: 14px 0; font: 600 13px/1.4 system-ui, sans-serif;
  color: rgba(240,238,255,0.62); transition: color .25s;
}
.acc-uline summary::-webkit-details-marker { display: none; }
.acc-uline summary::after {
  content: ''; position: absolute; left: 0; bottom: -1px;
  height: 2px; width: 0;
  background: linear-gradient(90deg, #9c7bd6, #d49a5c);
  transition: width .4s cubic-bezier(.2,.9,.3,1);
}
.acc-uline[open] summary { color: #f0eeff; }
.acc-uline[open] summary::after { width: 100%; }
.acc-uline p {
  margin: 0; padding: 10px 0 16px;
  font: 12px/1.6 system-ui, sans-serif; color: rgba(240,238,255,0.55);
}

More from 26 CSS Accordions — Vertical & Horizontal

Numbered Steps Plus / Minus Morph Chevron Rotate Brutalist Stamp Glass Frosted Minimal Rail Card Lift Strip Tabs Image Reveal Color Block Numbered Spine Curtain Slide

View the full collection →