Article: Better Code Blocks with Wrapping, Numbering, and Labels
There are five actual lines of code in this snippet, each wrapped in <span class="line">…</span> (denoted by the numbers and borders). The wrapping indicators at the end of each visual line inside those use an image that’s one line tall, repeated vertically, and moved up one full line to hide it on the last one. Disabling top or overflow: hidden below will reveal the red mark showing where each column of arrows really begins.
background-size would normally be interpreted as 1em auto when given the single value 1em, but this CSS deliberately gives it two values (1em 2em) to emphasize the difference.
Source listings on this site (like the one at the end of this page) use the same approach.
<picture class="image-picture">
<source media="(prefers-reduced-data: reduce)" srcset="/assets/images/resized/e_YI6UQLeo-400.avif 400w, /assets/images/resized/e_YI6UQLeo-800.avif 800w, /assets/images/resized/e_YI6UQLeo-1200.avif 1200w, /assets/images/resized/e_YI6UQLeo-2416.avif 2416w" format="avif" width="400" height="145" sizes="(min-width: 70.75em) 19rem, (min-width: 480px) 400px, 85vw">
<source srcset="/assets/images/resized/e_YI6UQLeo-400.webp 400w, /assets/images/resized/e_YI6UQLeo-800.webp 800w, /assets/images/resized/e_YI6UQLeo-1200.webp 1200w, /assets/images/resized/e_YI6UQLeo-2416.webp 2416w" format="webp" width="400" height="145" sizes="(min-width: 70.75em) 19rem, (min-width: 480px) 400px, 85vw">
<img class="image-image" alt="" loading="lazy" srcset="/assets/images/resized/e_YI6UQLeo-400.png 400w, /assets/images/resized/e_YI6UQLeo-800.png 800w, /assets/images/resized/e_YI6UQLeo-1200.png 1200w, /assets/images/resized/e_YI6UQLeo-2416.png 2416w" width="400" height="145" sizes="(min-width: 70.75em) 19rem, (min-width: 480px) 400px, 85vw">
</picture>View CSS
[data-line-demo] {
--line-height: 1lh;
--border-padding: 0.5em;
display: flex;
flex-flow: row nowrap;
line-height: var(--line-height);
position: relative;
border-top: 1px solid currentColor;
border-color: hsl(from currentColor h s l / 0.5);
}
[data-line-demo] .line-content,
[data-line-demo]::before {
display: block;
height: 100%;
min-width: 2ch;
padding: calc(var(--spacing-unit) / 8) var(--border-padding) 0 calc(var(--border-padding) / 2);
}
[data-line-demo]::before {
padding: 0 0.5ch;
}
[data-line-demo] .line-content {
border-left: 1px solid;
flex: 1 1 100%;
position: relative;
}
[data-line-demo] .line-content::after {
display: block;
content: "";
position: absolute;
z-index: 1;
height: 100%;
width: calc(var(--line-height) / 2);
background: repeat-y url("/static/pre-wrap-with-indicators/indicator.svg") right top;
/* Use a two-value `background-size` for the sake of the demo. */
background-size: 1em 2em;
/* Just for effect. */
top: 0;
right: 0;
}