Vertical Rail
Thin gradient rail on the left edge that brightens on :hover — editorial restraint. Perfect for long-form articles with multiple call-out quotes.
Vertical Rail the 7th of 19 designs in the 19 CSS Blockquote Designs 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
<figure class="cbq-rail">
<blockquote>
<p>Constraints don't kill creativity — they sharpen it.</p>
</blockquote>
<figcaption>— Maya Chen</figcaption>
</figure> .cbq-rail {
max-width: 340px;
padding: 14px 18px;
position: relative;
font-family: Georgia, serif;
color: #e0deff;
transition: padding-left 0.25s ease;
}
.cbq-rail::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, #7c6cff, #2eb88a);
border-radius: 3px;
opacity: 0.5;
transition:
opacity 0.25s ease,
width 0.25s ease;
}
.cbq-rail:hover::before {
opacity: 1;
width: 5px;
}
.cbq-rail blockquote {
margin: 0;
}
.cbq-rail p {
margin: 0;
font-size: 16px;
line-height: 1.5;
font-style: italic;
}
.cbq-rail figcaption {
margin-top: 10px;
font-size: 12px;
color: #b8b6d4;
font-style: normal;
}