Separator

Code

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Inter, system-ui, sans-serif;
  background: #050910;
  color: #f2f6ff;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.demo {
  width: 100%;
  max-width: 520px;
}
.demo-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 0.375rem;
}
.demo-sub {
  color: #475569;
  font-size: 0.875rem;
  margin-bottom: 2rem;
}

.examples {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.example {
}
.example-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #475569;
  margin-bottom: 0.625rem;
}

/* ── Base separator ── */
.sep {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0;
}

/* ── Dashed ── */
.sep--dashed {
  border-top-style: dashed;
}

/* ── Dotted ── */
.sep--dotted {
  border-top-style: dotted;
}

/* ── Text variants ── */
.sep--text {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: none;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.sep--text::before,
.sep--text::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.sep--text::before {
  content: "";
}
.sep--text::after {
  content: "";
}

/* Inject label text */
.sep--text[data-label]::before {
  flex: 1;
}
.sep--text[data-label]::after {
  flex: 1;
}

/* Override: inject content after ::before using a trick */
.sep--text {
  position: relative;
}
.sep--text[data-label] {
  display: flex;
  align-items: center;
  gap: 1rem;
}
/* Use the data attribute as text via JS-free approach with ::after on parent */
/* Actually use a pseudo trick: can't use attr() in content for styled text easily without JS */
/* So we simply rely on the data-label being rendered via additional span below */

/* Left-aligned text */
.sep--text-left::before {
  flex: 0 0 0;
  display: none;
}
.sep--text-left {
  justify-content: flex-start;
}

/* ── Gradient ── */
.sep--gradient {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%
  );
}

/* ── Diamond ── */
.sep--diamond {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.15);
  font-size: 0.6rem;
}
.sep--diamond::before,
.sep--diamond::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.sep--diamond::after {
  content: "◆";
  flex: 0;
  color: rgba(255, 255, 255, 0.2);
  font-size: 0.6rem;
}
.sep--diamond::before {
  content: "";
}

/* ── Vertical ── */
.sep--vertical {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  height: auto;
}

.flex-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.875rem;
  color: #64748b;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Separator</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="demo">
    <h1 class="demo-title">Separator</h1>
    <p class="demo-sub">Horizontal and vertical dividers in multiple styles.</p>

    <div class="examples">
      <div class="example">
        <p class="example-label">Plain</p>
        <hr class="sep" />
      </div>

      <div class="example">
        <p class="example-label">Center text — "OR"</p>
        <div class="sep sep--text" data-label="OR"></div>
      </div>

      <div class="example">
        <p class="example-label">Left text</p>
        <div class="sep sep--text sep--text-left" data-label="SECTION TITLE"></div>
      </div>

      <div class="example">
        <p class="example-label">Gradient fade</p>
        <div class="sep sep--gradient"></div>
      </div>

      <div class="example">
        <p class="example-label">Dashed</p>
        <hr class="sep sep--dashed" />
      </div>

      <div class="example">
        <p class="example-label">Dotted</p>
        <hr class="sep sep--dotted" />
      </div>

      <div class="example">
        <p class="example-label">Decorative diamond</p>
        <div class="sep sep--diamond"></div>
      </div>

      <div class="example">
        <p class="example-label">Vertical (in flex row)</p>
        <div class="flex-row">
          <span>Home</span>
          <div class="sep sep--vertical" role="separator" aria-orientation="vertical"></div>
          <span>Library</span>
          <div class="sep sep--vertical" role="separator" aria-orientation="vertical"></div>
          <span>Docs</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Visual dividers to separate sections of content.

Variants

Plain — simple horizontal line
Center text — “OR” or section heading between two lines
Left text — aligned section label
Gradient — fades to transparent at edges
Dashed / Dotted — alternate border styles
Vertical — for separating inline items in a flex row
Decorative — diamond ◆ center ornament

All use <hr> or role="separator" for semantics.