Back to CSS Dividers Fashion Dividers Pure CSS
Share
HTML
<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>
CSS
@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; }
}