使用伪css elment使水平线跨越容器的宽度

Question

我想制作一条水平线,横跨放置它的容器的宽度.带衬里的元素应如下所示:

//////////////////////////////////////////////////////////////////

非常像横向规则.我已经尝试了但只有当我在伪元素的content属性中放入足够的斜杠时才采用100%宽度.这是我的HTML代码:

<div style='width: 100%;>
   <p class='horizontal-line'></p>
</div>

这是我的CSS代码:

.horizontal-line:before
{
 content: '///////////////////////////////////////////////////////////////////////////////////';
 margin: 0;
 padding: 0;
 color: purple;
 width: 100%;
 font-size: 10px;
}

结果是:

///////////////////////////////////////////

但它不会超过100%的外部div宽度.为了做到这一点,我必须在内容属性中添加更多斜杠.我知道有一些替代和更好的方法来实现这一目标.

PS:我不擅长使用伪元素,可能做错了.谁有人指出？

编辑:如果我在内容属性中放置了许多斜杠,那么当放置在较小的容器中时,水平线会变为两行. 这是小提琴链接

Answer 1

我认为你应该尝试线性渐变.请找到以下代码.

.horizontal-line:before
{
 content: '';
 margin: 0;
 padding: 0;
 color: purple;
 width: 100%;
 height: 10px;
 font-size: 10px;
 display:block;
 background: repeating-linear-gradient(135deg,purple,purple .25em,transparent 0,transparent .75em );

}

<div style='width: 100%;'>
   <p class='horizontal-line'></p>
</div>