26 CSS Dividers09 / 26

Pure CSSMIT licensed

Editorial Article Serif Divider CSS

How print handles a scene break: not a line, but breathing room and a mark. This demo pairs a true asterism break with a real drop cap set by initial-letter — the property that sinks a letter by a number of lines instead of the fragile float-plus-magic-numbers hack — and a first-line small-caps lead-in. Everything you need for long-form reading layouts that feel typeset rather than styled.

Published Updated

Live Demo
Try it

The code

<section class="div-09" aria-label="Editorial serif divider and drop cap demo">
  <article class="div-09__stage">
    <p class="div-09__kicker">Essay · Typography</p>
    <h2 class="div-09__title">The Quiet Rules of the Page</h2>
    <p class="div-09__lead">Typographers spend their lives on decisions readers are never meant to notice. A scene break is one of them: the reader feels a pause, closes one thought, opens another, and never once thinks about the mark that did it.</p>
    <hr class="div-09__break" aria-label="Section break">
    <p class="div-09__body">Print solved this centuries before the browser existed. A rule across the column reads as an ending; a small centred ornament with air above and below reads as a breath. The difference is not decoration, it is grammar — and it is why editorial CSS should reach for whitespace before it reaches for a border.</p>
    <hr class="div-09__break div-09__break--dots" aria-label="Section break">
    <p class="div-09__body">Set the measure at sixty-five characters, give the break two-and-a-half ems of air, and let the mark be small. The page will feel typeset rather than styled, which is the entire ambition.</p>
    <p class="div-09__chip">initial-letter · ⁂ asterism · text-indent cancels letter-spacing</p>
  </article>
</section>
.div-09 {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: block;
  background: var(--div-09-bg);
  --div-09-bg: oklch(0.972 0.011 88);
  --div-09-ink: oklch(0.24 0.018 55);
  --div-09-mut: oklch(0.53 0.02 55);
  --div-09-line: oklch(0.24 0.018 55/.22);
  --div-09-acc: oklch(0.5 0.13 32);
  font-family: Georgia,'Iowan Old Style','Times New Roman',serif;
  color: var(--div-09-ink);
}

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

.div-09__stage {
  min-height: 100svh;
  width: min(92vw,64ch);
  margin-inline: auto;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: clamp(32px,6vw,72px) 0;
}

.div-09__kicker {
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--div-09-acc);
  margin-bottom: 10px;
}

.div-09__title {
  font-size: clamp(30px,5.4vw,54px);
  line-height: 1.07;
  letter-spacing: -.022em;
  font-weight: 400;
  margin-bottom: 22px;
  text-wrap: balance;
}

.div-09__lead,
.div-09__body {
  font-size: clamp(16px,2vw,19px);
  line-height: 1.66;
  text-wrap: pretty;
}

.div-09__lead::first-letter {
  -webkit-initial-letter: 3;
  initial-letter: 3;
  color: var(--div-09-acc);
  font-weight: 700;
  margin-right: .09em;
}

@supports not (initial-letter: 3) {
  .div-09__lead::first-letter {
    float: left;
    font-size: 3.35em;
    line-height: .86;
    padding: .06em .09em 0 0;
  }
}

.div-09__break {
  border: 0;
  height: auto;
  text-align: center;
  color: var(--div-09-acc);
  margin: clamp(26px,4vw,42px) 0;
  letter-spacing: .62em;
  text-indent: .62em;
  font-size: 15px;
  line-height: 1;
}

.div-09__break::before {
  content: '\2042';
}

.div-09__break--dots::before {
  content: '\2022 \2022 \2022';
  font-size: 9px;
  letter-spacing: .9em;
  text-indent: .9em;
}

.div-09__chip {
  margin-top: 26px;
  justify-self: start;
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11px;
  color: var(--div-09-mut);
  padding: 8px 14px;
  border: 1px solid var(--div-09-line);
  border-radius: 99px;
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Divider from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Editorial Article Serif Divider CSS
Source: https://codefronts.com/snippets/css-dividers/editorial-dividers/

How print handles a scene break: not a line, but breathing room and a mark. This demo pairs a true asterism break with a real drop cap set by initial-letter — the property that sinks a letter by a number of lines instead of the fragile float-plus-magic-numbers hack — and a first-line small-caps lead-in. Everything you need for long-form reading layouts that feel typeset rather than styled.
## HTML
```html
<section class="div-09" aria-label="Editorial serif divider and drop cap demo">
  <article class="div-09__stage">
    <p class="div-09__kicker">Essay · Typography</p>
    <h2 class="div-09__title">The Quiet Rules of the Page</h2>
    <p class="div-09__lead">Typographers spend their lives on decisions readers are never meant to notice. A scene break is one of them: the reader feels a pause, closes one thought, opens another, and never once thinks about the mark that did it.</p>
    <hr class="div-09__break" aria-label="Section break">
    <p class="div-09__body">Print solved this centuries before the browser existed. A rule across the column reads as an ending; a small centred ornament with air above and below reads as a breath. The difference is not decoration, it is grammar — and it is why editorial CSS should reach for whitespace before it reaches for a border.</p>
    <hr class="div-09__break div-09__break--dots" aria-label="Section break">
    <p class="div-09__body">Set the measure at sixty-five characters, give the break two-and-a-half ems of air, and let the mark be small. The page will feel typeset rather than styled, which is the entire ambition.</p>
    <p class="div-09__chip">initial-letter · ⁂ asterism · text-indent cancels letter-spacing</p>
  </article>
</section>
```
## CSS
```css
.div-09 {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: block;
  background: var(--div-09-bg);
  --div-09-bg: oklch(0.972 0.011 88);
  --div-09-ink: oklch(0.24 0.018 55);
  --div-09-mut: oklch(0.53 0.02 55);
  --div-09-line: oklch(0.24 0.018 55/.22);
  --div-09-acc: oklch(0.5 0.13 32);
  font-family: Georgia,'Iowan Old Style','Times New Roman',serif;
  color: var(--div-09-ink);
}

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

.div-09__stage {
  min-height: 100svh;
  width: min(92vw,64ch);
  margin-inline: auto;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: clamp(32px,6vw,72px) 0;
}

.div-09__kicker {
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--div-09-acc);
  margin-bottom: 10px;
}

.div-09__title {
  font-size: clamp(30px,5.4vw,54px);
  line-height: 1.07;
  letter-spacing: -.022em;
  font-weight: 400;
  margin-bottom: 22px;
  text-wrap: balance;
}

.div-09__lead,
.div-09__body {
  font-size: clamp(16px,2vw,19px);
  line-height: 1.66;
  text-wrap: pretty;
}

.div-09__lead::first-letter {
  -webkit-initial-letter: 3;
  initial-letter: 3;
  color: var(--div-09-acc);
  font-weight: 700;
  margin-right: .09em;
}

@supports not (initial-letter: 3) {
  .div-09__lead::first-letter {
    float: left;
    font-size: 3.35em;
    line-height: .86;
    padding: .06em .09em 0 0;
  }
}

.div-09__break {
  border: 0;
  height: auto;
  text-align: center;
  color: var(--div-09-acc);
  margin: clamp(26px,4vw,42px) 0;
  letter-spacing: .62em;
  text-indent: .62em;
  font-size: 15px;
  line-height: 1;
}

.div-09__break::before {
  content: '\2042';
}

.div-09__break--dots::before {
  content: '\2022 \2022 \2022';
  font-size: 9px;
  letter-spacing: .9em;
  text-indent: .9em;
}

.div-09__chip {
  margin-top: 26px;
  justify-self: start;
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11px;
  color: var(--div-09-mut);
  padding: 8px 14px;
  border: 1px solid var(--div-09-line);
  border-radius: 99px;
}
```

How this works

Two properties carry this whole demo. The scene break is centred content with generous vertical rhythm:

.break{ text-align:center; margin:2.6em 0; color:var(--acc);
        letter-spacing:.6em; text-indent:.6em; }
.break::before{ content:'\\2042' }   /* ⁂ ASTERISM */

The text-indent matching the letter-spacing is the detail nobody mentions: letter-spacing adds space after every character including the last, so a centred spaced string sits visibly left of centre. Indenting by one space-unit cancels it.

The drop cap uses the modern property rather than a float:

p.lead::first-letter{ initial-letter:3;
  font-family:Georgia,serif; color:var(--acc);
  margin-right:.08em; font-weight:600; }

initial-letter:3 tells the browser "this glyph is three lines tall and sits on the third baseline" — the engine does the optical alignment, so the cap's cap-height lines up with the first line's ascender and its baseline sits exactly on line three. The float method approximates that with a hand-tuned line-height and margin-top that breaks the moment the font, size or measure changes. Where initial-letter is missing, the @supports block below it applies a float fallback — the paragraph still reads, just with a slightly less perfect fit.

Make it yours

  • Break marks: ⁂ (asterism), * * *, ❦ (fleuron), or three widely-spaced bullets. Anything works — the spacing and the text-indent fix are what make it look typeset.
  • Cap size: initial-letter:2 for a quiet magazine cap, 4 for a full-page feature opener. Above 4, set the measure wider or the wrapped lines get too short to read.
  • Small-caps lead-in: p.lead::first-line{ font-variant-caps:small-caps; letter-spacing:.06em } — a classic partner to the drop cap.
  • Rule-plus-mark hybrid: give the break a ::after hairline at 30% width for magazines that want both a mark and a rule.

Gotchas — read before shipping

  • ::first-letter only accepts a limited property set (font, colour, background, margin, padding, border, text-decoration, initial-letter). Setting display or position on it silently does nothing.
  • Firefox still ships no initial-letter. Always pair it with an @supports not (initial-letter:2) float fallback or a third of your readers see an ordinary capital.
  • If the paragraph starts with an opening quotation mark, ::first-letter grabs the punctuation AND the letter — set initial-letter-align:hanging where supported, or start the paragraph with the letter.
  • Don't use a horizontal rule for a scene break in long-form text. Whitespace plus a mark is the typographic convention; a full rule reads as an end-of-article marker.

Browser support

ChromeSafariFirefoxEdge
114+17.5+121+114+

Floor set by oklch(), text-wrap as this demo is written. The core technique itself goes back further — Chrome 110+.

initial-letter: Chrome 110, Safari 9 with -webkit- prefix, Firefox not yet. The @supports float fallback covers Firefox; the asterism break itself is universal.

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →