26 CSS Accordions — Vertical & Horizontal 01 / 26
Underline Reveal
Vertical accordion with a left-anchored underline that grows across the open trigger.
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> <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);
} .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 StepsPlus / Minus MorphChevron RotateBrutalist StampGlass FrostedMinimal RailCard LiftStrip TabsImage RevealColor BlockNumbered SpineCurtain Slide
View the full collection →