pre-wrap With Indicators

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.

<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>

[data-line-demo] {
  --line-height: 1.4em;
  --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;
  padding: calc(var(--spacing-unit) / 8) 0;
  height: 100%;
  min-width: 2ch;
}
[data-line-demo] .line-content {
  padding-left: calc(var(--border-padding) / 2);
  padding-right: var(--border-padding);
  border-left: 1px solid;
  flex: 1 1 100%;
  position: relative;
}
[data-line-demo] .line-content::after {
  --arrow-size: 1em;
  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/var(--arrow-size);
  /* background-image: url("/assets/images/icons/return-edited.svg"); */
  /* background-repeat: no-repeat repeat-y; */
  border-top: 0.1em solid red;
  /* background-position: right top; */

  /* Just for effect. */
  top: 0;
  right: 0;
}
[data-line-demo]::before {
  content: attr(data-line-demo);
  padding-right: calc(var(--border-padding) / 2);
  text-align: right;
  flex: 0 0 calc(max(2, var(--digits)) * 0.75em + 0.2em);
}