printing repeating linear gradient from browser

Question

I have a <div>. In it, there is a <p> that on the screen looks like the picture below

I need to have the horizontal rules under each line of the paragraph (horizontal rules marked in red in the picture). The most important thing is that the horizontal rules should take the whole width of the parent <div> so text-decoration: underline won't work here. I drew the lines using repeating linear gradient like this

p.text--underline {
    line-height: 1.45;
    background: repeating-linear-gradient(
            to bottom,
            transparent calc(1.5em - 1.5px),
            black 1.5em,
            transparent 1.5em,
            transparent calc(3em - 1.5px)
    );
    box-shadow: inset 0 0.5em  white;
}

But the problem is that the horizontal rules are visible in the browsers, but are not visible when printing. I need them to be visible on paper. How to do this?

Answer 1

You can wrap each word with <span> and draw lines with border of each word's :after. You will need to add some JavaScript if the text inside <p> is not fully under your control and you can't wrap words with spans on the server.

var p = document.querySelector('p');
var words = p.textContent.split(/\s+/gm);
p.classList.add('container');
p.innerHTML = words.map(function(w) {
  return '<span class="word">' + w + '</span>';
}).join('\n');

.container {
  position: relative;
}

.word:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  border-bottom: 1px solid black;
}

<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam blandit diam justo, in vulputate massa sodales egestas. Aenean luctus sapien eleifend ipsum venenatis, nec pharetra sem congue. Quisque nec sem leo. Donec posuere nibh ut nibh vehicula, ut hendrerit mi sollicitudin. Proin sed sapien vel sem ultrices euismod eget quis urna. Nulla facilisi. Sed eu mi ac nulla consequat lobortis ac ac elit. Mauris sit amet ante ac ante pulvinar ultricies a ut ante. Suspendisse metus nulla, porttitor et augue quis, consectetur fermentum lorem. Phasellus metus est, ultrices quis enim porta, facilisis cursus ante. Ut justo quam, suscipit nec facilisis eget, elementum ac lectus. Nulla at auctor ipsum.</p>
</div>

Plunker: https://plnkr.co/edit/tJfLhixTTJ53FVe10ugw?p=preview

I've tested in Chrome, Firefox and Safari, and it worked fine in all of them.