Javascript 从浏览器打印重复线性渐变

我有一个

。其中有一个

，屏幕上看起来像下图

我需要在段落的每一行下有水平规则（图片中用红色标记的水平规则）。最重要的是，水平规则应该占据父级

的整个宽度，因此

文本装饰：下划线在这里不起作用。我用重复的线性渐变画线，就像这样

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

但问题是水平规则在浏览器中可见，但在打印时不可见。我需要它们在纸上清晰可见。如何做到这一点？
你应该

您可以在不更改浏览器设置的情况下打印HR，如下所示：

hr {
    display: block;
    height: 1px;
    background: transparent;
    width: 100%;
    border: none;
    border-top: solid 1px #aaa;
}

您可以用
包装每个单词，并在
之后用每个单词的
：边框画线。如果
中的文本不完全在您的控制之下，并且您无法在服务器上用跨距包装单词，则需要添加一些JavaScript


var p=document.querySelector（'p'）；
var words=p.textContent.split（/\s+/gm）；
p、 添加（'container'）；
p、 innerHTML=words.map（函数（w）{
返回“+w+”；
}).join（'\n'）
.container{
位置：相对位置；
}
.单词：之后{
内容：''；
显示：块；
位置：绝对位置；
左：0；
宽度：100%；
边框底部：1px纯黑；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。艾蒂安·布兰迪特·迪亚姆·胡斯托（Etiam blandit diam justo），位于苏打拉斯埃吉斯塔斯（massa sodales egestas）。安尼安·卢库斯·萨皮安·伊凡德·伊普苏姆·维尼那蒂斯，nec pharetra sem congue。奎斯克·内克·塞姆·利奥。不要把车停在一边，把车停在一边。以智者的水平为基础的教育。无便利。这是一个非常重要的问题。莫里斯坐在一张桌子前，在另一张桌子前。梅托斯·努拉、波特提托和奥古斯·奎斯（porttitor et augue-quis）、酵母菌（Concertetur ference um lorem）。最重要的一点是，我们的目标是实现目标，我们的目标是实现目标。但是，我们需要一套新的设施，一套基本的选择。同侧拍卖人处无空

恐怕您的解决方案只会在段落开头画一个上边框，但我需要在段落的每一行下都有水平规则。您能发送fiddle js吗