Newspaper Dividers
Three broadsheet-print breaks — a thick-thin masthead rule, a starred jump-line break, and a column-end colophon dash.
Newspaper Dividers the 13th 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-news-surface"> <p class="div-news-text">The morning edition carried news of the harbour expansion on its front page, set in a headline type the paper had used, unchanged, since nineteen thirty-eight.</p> <div class="div-news-v1" role="separator"><i></i><i></i></div> <p class="div-news-text">Continued reporting suggested the council vote would be closer than the early projections implied — three members had not yet declared a position.</p> <div class="div-news-v2" role="separator"><span>★ ★ ★</span></div> <p class="div-news-text">In the arts section, a review of the season's first concert ran two columns, praising the strings and saying little, pointedly, of the brass.</p> <div class="div-news-v3" role="separator"><span>— 30 —</span></div> <p class="div-news-text">The weather, the almanac noted, would turn by the weekend; readers along the coast were advised to expect the first hard frost of the year.</p> </div>
@keyframes div-news-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-news-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.div-news-surface {
background: #f3efe6;
padding: 36px 40px;
border-radius: 12px;
}
.div-news-text {
font-family: Georgia, "Times New Roman", serif;
font-size: 15px;
line-height: 1.82;
color: #2a2620;
margin: 0;
}
/* v1 — thick-thin masthead rule */
.div-news-v1 { margin: 30px 0; }
.div-news-v1 i {
display: block;
transform-origin: left;
animation: div-news-grow 0.7s cubic-bezier(.18,0,.05,1) both;
}
.div-news-v1 i:nth-child(1) { height: 3px; background: #2a2620; }
.div-news-v1 i:nth-child(2) { height: 1px; margin-top: 3px; background: #2a2620; animation-delay: 0.22s; }
/* v2 — starred jump-line break */
.div-news-v2 {
display: flex;
align-items: center;
gap: 18px;
margin: 30px 0;
}
.div-news-v2::before,
.div-news-v2::after {
content: '';
flex: 1;
height: 1px;
background: #8a8270;
animation: div-news-grow 0.7s cubic-bezier(.16,1,.3,1) 0.1s both;
}
.div-news-v2::before { transform-origin: right; }
.div-news-v2::after { transform-origin: left; animation-delay: 0.14s; }
.div-news-v2 span {
flex-shrink: 0;
font-size: 9px;
letter-spacing: 0.4em;
color: #6a6252;
animation: div-news-fade 0.5s ease 0.5s both;
}
/* v3 — column-end colophon dash ("-30-" = end of story) */
.div-news-v3 {
display: flex;
justify-content: center;
margin: 30px 0;
}
.div-news-v3 span {
font-family: Georgia, serif;
font-size: 12px;
letter-spacing: 0.2em;
color: #6a6252;
padding: 4px 0;
border-top: 1px solid #c4bca8;
border-bottom: 1px solid #c4bca8;
animation: div-news-fade 0.55s ease 0.15s both;
}
@media (prefers-reduced-motion: reduce) {
.div-news-v1 i, .div-news-v2::before, .div-news-v2::after,
.div-news-v2 span, .div-news-v3 span { animation: none; }
}