html - 使用伪 css 元素制作横跨容器宽度的水平线

Question

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

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

很像水平尺。我试过了，但只有当我在伪元素的内容属性中放置足够多的斜杠时，才会采用 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;
}

结果是:

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

但它不会跨越外部 div 的 100% 宽度。为此，我必须在 content 属性中添加更多斜杠。我知道有一些替代的更好的方法可以实现这一目标。

P.S:我不太擅长使用伪元素，可能做错了什么。谁能指出来？

编辑:如果我在 content 属性中放置许多斜杠，那么当放置在较小的容器中时，水平线会变成两行。 Here is fiddle link

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>