使用伪 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% 宽度。为此，我必须在内容属性中添加更多斜杠。我知道有一些更好的替代方法可以实现这一目标。

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

编辑：如果我在内容属性中放置很多斜杠，那么当放置在较小的容器中时，水平线会变成两行。 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>

Answer 2

您可以使用 css background 属性实现此目的，如下所示：

.horizontal-line {
 margin: 0;
 padding: 0;
 width: 100%;
 height: 10px;
 background: purple linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0)) repeat scroll 0 0 / 40px 40px
}

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

Answer 3

如果它实际上需要是 /// 行，那么您可以使用图像稍微欺骗一下。 ;)

.my-line
{
    width: 100%;
    height: 11px;
    background: url("//i.imgur.com/OMxDsnu.png");
    background-repeat: repeat-x;
}

<p>Before Line</p>
<div class="my-line"></div>
<p>After Line</p>

Answer 4

这里有 3 个选项

使用非常长content并将其父溢出设置为隐藏。
使用 css linear-gradient to draw your stripes. Problem here is, the gradient may look poor (looks like aliasing issue). But here 是一个很好的解释和建议如何克服这个问题。
将你的图案绘制为图像并使用背景重复，你可以在线绘制你的图案（即http://www.patternify.com/）并仅使用base64版本的图像

以下是所有三个选项的示例：

p { width: 80%; margin: 0px auto; margin-top: 30px; padding: 0; }
.container { width: 80%; border: 2px solid #888; margin: 10px auto; padding: 10px 0; }
.horizontal-line { width: 100%; height: 10px; }

.horizontal-line-v1 { overflow: hidden; }
.horizontal-line-v1:before
{
 content: '//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////';
 color: purple;
 font-size: 20px;
}

.horizontal-line-v2 { 
  background-image: linear-gradient(-45deg, purple 25%, transparent 25%, transparent 50%, purple 50%, purple 75%, transparent 75%, transparent);
  background-size: 4px 4px;
}

.horizontal-line-v3 {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAKElEQVQYV2NkQAMNDA3/GZHFQAINDA2McEGYAEgRWBBZACyILgASBACrXQ4FrzarHwAAAABJRU5ErkJggg==");
}

<p>Stripes using :before and content</p>
<div class="container">
   <div class='horizontal-line horizontal-line-v1'></div>
</div>

<p>Stripes using css linear-gradient</p>
<div class="container">
   <div class='horizontal-line horizontal-line-v2'></div>
</div>

<p>Stripes using base64 image</p>
<div class="container">
   <div class='horizontal-line horizontal-line-v3'></div>
</div>

Here is jsFiddle

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

Make horizontal line spanning to width of container using pseudo css elment

html

css

pseudo-class