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;
}

结果是：

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

但它不会跨越外部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属性实现此目的：

＆＃13;

.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
}

＆＃13;

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

＆＃13;

Answer 3

这里有3个选项

使用非常长content 并将其父级溢出设置为隐藏。
使用css linear-gradient绘制条纹。问题在于，渐变可能看起来很差（看起来像混叠问题）。但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

Answer 4

如果它实际上需要是/// - 行，那么你可以使用图像来欺骗它。 ;）

＆＃13;

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

＆＃13;

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

＆＃13;

使用伪css elment

4 个答案: