Scientific Dividers
Three precise, instrument-styled breaks — a measurement ruler with a section marker, a connection-node line, and a flip-in chapter label between calibrated rules.
Scientific Dividers the 7th 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-sci-surface">
<p class="div-sci-text">Fluorescence microscopy revealed distinct subcellular compartmentalization. Statistical significance was assessed across three independent biological replicates (n=847).</p>
<div class="div-sci-v1" role="separator">
<span class="div-sci-ticks"></span>
<span class="div-sci-rbar"></span>
<span class="div-sci-rlbl">§ 2.4</span>
</div>
<p class="div-sci-text">Protein complex formation was confirmed via co-immunoprecipitation followed by tandem mass spectrometry, with peak thresholds set at 3σ above baseline.</p>
<div class="div-sci-v2" role="separator">
<span class="div-sci-dline"></span>
<span class="div-sci-ddots"><i></i><i></i><i></i><i></i><i></i></span>
</div>
<p class="div-sci-text">Temperature-dependent conformational changes were observed across all conditions, with a thermal denaturation midpoint of 68.4°C (±0.7).</p>
<div class="div-sci-v3" role="separator">
<span class="div-sci-rule"></span>
<b>§ 3.1 — RESULTS</b>
<span class="div-sci-rule"></span>
</div>
<p class="div-sci-text">Gene expression profiles were analyzed across 12 developmental timepoints; hierarchical clustering revealed three distinct expression modules.</p>
</div> @keyframes div-sci-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-sci-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes div-sci-dot { from { transform: scale(0); } 65% { transform: scale(1.3); } to { transform: scale(1); } }
@keyframes div-sci-flip { from { transform: perspective(300px) rotateX(90deg); opacity: 0; } to { transform: perspective(300px) rotateX(0); opacity: 1; } }
@keyframes div-sci-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0% 0 0); } }
.div-sci-surface {
background: #f5f7fb;
padding: 36px 40px;
border-radius: 12px;
}
.div-sci-text {
font-family: system-ui, -apple-system, sans-serif;
font-size: 14px;
line-height: 1.78;
color: #1e2533;
margin: 0;
}
/* v1 — measurement ruler with a section marker */
.div-sci-v1 {
position: relative;
height: 26px;
margin: 32px 0;
}
.div-sci-ticks {
position: absolute;
bottom: 8px;
left: 0;
right: 0;
height: 18px;
/* major tick every 64px, minor every 16px — pure-CSS ruler */
background:
repeating-linear-gradient(to right, #3060b8 0 1.5px, transparent 1.5px 64px),
repeating-linear-gradient(to right, rgba(48,96,184,0.35) 0 1px, transparent 1px 16px);
background-size: 100% 18px, 100% 7px;
background-position: bottom, bottom;
background-repeat: repeat-x;
transform-origin: left;
animation: div-sci-wipe 0.9s cubic-bezier(.16,1,.3,1) both;
}
.div-sci-rbar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1.5px;
background: #3060b8;
transform-origin: left;
animation: div-sci-grow 0.8s cubic-bezier(.16,1,.3,1) 0.56s both;
}
.div-sci-rlbl {
position: absolute;
right: 0;
bottom: 7px;
font-family: "Courier New", monospace;
font-size: 10px;
letter-spacing: 0.12em;
color: #3060b8;
animation: div-sci-fade 0.4s ease 0.96s both;
}
/* v2 — connection-node line */
.div-sci-v2 {
position: relative;
height: 14px;
margin: 32px 0;
}
.div-sci-dline {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #dde4f0;
transform-origin: left;
animation: div-sci-grow 0.6s ease 0.08s both;
}
.div-sci-ddots {
position: absolute;
inset: 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.div-sci-ddots i {
width: 8px;
height: 8px;
border-radius: 50%;
border: 1.5px solid #3060b8;
background: #f5f7fb;
animation: div-sci-dot 0.4s cubic-bezier(.34,1.56,.64,1) both;
}
.div-sci-ddots i:nth-child(1) { animation-delay: 0.28s; }
.div-sci-ddots i:nth-child(2) { animation-delay: 0.4s; }
.div-sci-ddots i:nth-child(3) { animation-delay: 0.52s; border-color: #c8361a; background: #fff8f6; }
.div-sci-ddots i:nth-child(4) { animation-delay: 0.64s; }
.div-sci-ddots i:nth-child(5) { animation-delay: 0.76s; }
/* v3 — flip-in chapter label */
.div-sci-v3 {
display: flex;
align-items: center;
gap: 16px;
margin: 32px 0;
}
.div-sci-rule {
flex: 1;
height: 4px;
border-top: 1px solid #dde4f0;
border-bottom: 1px solid #c8d4ec;
animation: div-sci-grow 0.7s cubic-bezier(.16,1,.3,1) 0.4s both;
}
.div-sci-v3 .div-sci-rule:first-child { transform-origin: right; }
.div-sci-v3 .div-sci-rule:last-child { transform-origin: left; animation-delay: 0.45s; }
.div-sci-v3 b {
flex-shrink: 0;
font-family: "Courier New", monospace;
font-size: 10.5px;
font-weight: 400;
letter-spacing: 0.14em;
color: #3060b8;
white-space: nowrap;
animation: div-sci-flip 0.5s cubic-bezier(.34,1.56,.64,1) 0.1s both;
}
@media (prefers-reduced-motion: reduce) {
.div-sci-ticks, .div-sci-rbar, .div-sci-rlbl, .div-sci-dline,
.div-sci-ddots i, .div-sci-rule, .div-sci-v3 b { animation: none; }
}