Javascript HTML/CSS全宽下划线

我试图找出如何在不在段落中添加
的情况下使每行的下划线/边框全宽。有人知道我应该如何处理这个问题吗

到目前为止，我有两种解决方案，即添加或创建图像，但这不是理想的情况

非常感谢您的帮助，谢谢

HTML

<p>We are always on the lookout for great talent. Please send in your resume or portfolio to test@test.com. The following positions are open.</p>

---

只需将文本放入span元素

Text文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

如果线条高度固定，可以使用渐变：

p{
  line-height: 20px;
  color: #333;
  background-image: 
    repeating-linear-gradient(180deg, transparent, transparent 19px, #333 20px);
}

---

CSS解决方案是设置

行高（此处为30px），然后调整
重复线性渐变上的停止位置，以与文本对齐（29px和30px）：

但是，请记住，每个浏览器引擎的渐变生成器都是为平滑的颜色过渡而构建的，而不是像素清晰的边缘，因此结果可能会有所不同。最好的解决方案可能是创建一个平铺图像（具有透明度和水平线），并将其用作
背景图像
我有一个小问题，其中线条显示为渐变，修复方法是指定从透明到黑色的切换发生在0.1px以上，因此无法检测到

p {line-height: 27px;
    color: #333;
    background-image: repeating-linear-gradient(180deg
, transparent, transparent 24px, #333 24.1px, #333 25.1px);
}

请添加一些代码或更好地解释您的情况，我无法理解您的要求。我只是尝试用下划线/边框模拟图像。可能是div还是它所在的项目？为了响应和清洁，现在我尝试不让每一行都是单独的div。这很接近，但我想确保每一行都达到全宽。请看图片。你能帮我解决每条线下的梯度问题吗？它们不是实心黑线。我需要所有的线条都是实心的。你的意思是匹配字体的宽度，比如？只需玩颜色停止，直到你得到正确的大小和位置
p{
  line-height: 20px;
  color: #333;
  background-image: 
    repeating-linear-gradient(180deg, transparent, transparent 19px, #333 20px);
}

p {
    line-height:30px;
    background-image: repeating-linear-gradient(180deg, transparent, transparent 29px, grey 30px);
    border-top:1px solid grey;
}

p {line-height: 27px;
    color: #333;
    background-image: repeating-linear-gradient(180deg
, transparent, transparent 24px, #333 24.1px, #333 25.1px);
}