Fashion Dividers
Three editorial runway breaks — a slamming black look-number bar, a letter-spaced caption between rules, and a burn-in collection tag.
Fashion Dividers the 9th of 18 designs in the 18 CSS Divider Collections 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
The code
<div class="div-fashion-surface">
<p class="div-fashion-text">The collection arrives in silence. No music, no commentary — just footsteps on polished concrete and the soft percussion of fabric.</p>
<div class="div-fashion-v1" role="separator"><span>— 14 —</span></div>
<p class="div-fashion-text">She believes silhouette is the only truth a garment can tell. Everything else — colour, texture — is opinion.</p>
<div class="div-fashion-v2" role="separator">
<span class="div-fashion-u"></span>
<span class="div-fashion-cap">FEATURE</span>
<span class="div-fashion-d"></span>
</div>
<p class="div-fashion-text">The atelier occupies four floors of a building that has stood on this street since 1891. The lift still requires an operator.</p>
<div class="div-fashion-v3" role="separator">COLLECTION · AUTUMN · 2025</div>
<p class="div-fashion-text">Fit is the argument. A jacket that fits correctly doesn't announce itself — it becomes invisible.</p>
</div> @keyframes div-fa-slam { from { transform: translateX(-110%); } to { transform: translateX(0); } }
@keyframes div-fa-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-fa-spread { from { letter-spacing: -0.2em; opacity: 0; } to { letter-spacing: 0.35em; opacity: 1; } }
@keyframes div-fa-burn { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0% 0); } }
.div-fashion-surface {
background: #ffffff;
padding: 36px 40px;
border-radius: 12px;
}
.div-fashion-text {
font-family: system-ui, -apple-system, Arial, sans-serif;
font-size: 14px;
line-height: 1.72;
letter-spacing: 0.01em;
color: #000000;
margin: 0;
}
/* v1 — slamming look-number bar */
.div-fashion-v1 {
margin: 32px 0;
overflow: hidden;
}
.div-fashion-v1 span {
display: flex;
align-items: center;
justify-content: flex-end;
height: 20px;
padding-right: 16px;
background: #000000;
font-family: system-ui, sans-serif;
font-size: 9px;
font-weight: 400;
letter-spacing: 0.3em;
color: #ffffff;
animation: div-fa-slam 0.5s cubic-bezier(.18,0,.04,1) 0.1s both;
}
/* v2 — letter-spaced caption between rules */
.div-fashion-v2 { margin: 32px 0; }
.div-fashion-u {
display: block;
height: 2px;
background: #000000;
transform-origin: left;
animation: div-fa-grow 0.58s cubic-bezier(.18,0,.04,1) both;
}
.div-fashion-d {
display: block;
height: 1px;
background: #000000;
transform-origin: left;
animation: div-fa-grow 0.58s cubic-bezier(.18,0,.04,1) 0.35s both;
}
.div-fashion-cap {
display: flex;
justify-content: center;
margin: 7px 0;
overflow: hidden;
font-family: system-ui, sans-serif;
font-size: 9px;
font-weight: 400;
letter-spacing: 0.35em;
color: #000000;
animation: div-fa-spread 0.6s cubic-bezier(.16,1,.3,1) 0.18s both;
}
/* v3 — burn-in collection tag */
.div-fashion-v3 {
margin: 32px 0;
padding: 7px 0;
border-top: 1.5px solid #000000;
border-bottom: 1.5px solid #000000;
font-family: system-ui, sans-serif;
font-size: 8.5px;
letter-spacing: 0.38em;
text-align: center;
color: #777777;
animation: div-fa-burn 0.55s cubic-bezier(.16,1,.3,1) 0.15s both;
}
@media (prefers-reduced-motion: reduce) {
.div-fashion-v1 span, .div-fashion-u, .div-fashion-d,
.div-fashion-cap, .div-fashion-v3 { animation: none; }
}