[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);
}