Javascript 如何在不替换文本的情况下，在div上画一条线？

我有一系列带有文本的正方形div，我需要在这些div上画一条线，在文本上。Z索引不是一个选项。两者都不是

，因为它需要扩展到整个div，而不仅仅是文本

---

我需要的是，它可以扩展到整个div，但要位于文本的顶部，就像在不同的层上一样，我正在尝试确定如果没有Z-Index，它是否可能实现。

一个好的老式hr可能会做到这一点：

 <hr style="position:absolute; width:50px; top:5px; left:5px;" />

在
的帮助下：在
之后

div{
位置：相对位置；
}
部门：之后{
位置：绝对位置；
左：0；
最高：50%；
高度：1px；
背景：#c00；
内容：“；
宽度：100%；
显示：块；
}
背景图像作为解决方案怎么样？
我指的是一些CSS代码，比如：

.DIV.squarestroke {
 background: url(img_with-line.gif) repeat;
}


如果你不能使用文本装饰：线条穿过，很可能你的div上有填充或边距，这就是为什么线条不会一直穿过的原因。这个片段将画一条与div宽度相等的线，并穿过文本，保留填充或边距

<div style="border:solid 2px black; padding : 100px">
       <div class="strike-through" style="border-bottom : solid 1px red; margin-bottom : -12px;"></div>
       <div style="text-align : center; padding-left:50px; padding-right:50px; border : solid 1px green;">Lorem Ipsum Voluptatem</div>
  </div>


同侧唇
为什么
z-index
不是一个选项？我很困惑。你想把这行写在正文上吗？还是在沙发上？请包括一个更好的描述，或理想的预期结果截图。另外，您尝试了什么来达到您想要的效果？您可以在您的文本或其父文本中使用绝对定位的
div
s。div的高度为0px，顶部或底部边框为1px。我的想法和你一样@MarcellFülöpYou应该将一些问题标记为已回答。背景将在文本下方运行。我的想法相同，在我的抱歉中使用了
，我的意思是在顶部。你是什么意思？
：after
伪元素（此处为行）位于父元素的顶部div@user1790093如果修改
：after
元素的高度，您可以清楚地看到它位于文本上方：我觉得自己很笨……我之前相当疲劳。这就行了！谢谢，伙计们。
<div style="border:solid 2px black; padding : 100px">
       <div class="strike-through" style="border-bottom : solid 1px red; margin-bottom : -12px;"></div>
       <div style="text-align : center; padding-left:50px; padding-right:50px; border : solid 1px green;">Lorem Ipsum Voluptatem</div>
  </div>