使用伪 css 元素使水平线跨越容器的宽度答案

【问题标题】：Make horizontal line spanning to width of container using pseudo css elment使用伪 css 元素使水平线跨越容器的宽度
【发布时间】：2016-10-19 19:21:29
【问题描述】：

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

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

很像水平尺。我已经尝试过了，但是只有当我在伪元素的内容属性中放置足够的斜线时才会采用 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：我不太擅长使用伪元素，可能做错了什么。谁能指出来？

编辑：如果我在内容属性中放置了许多斜线，那么当放置在较小的容器中时，水平线变为两行。 Here is fiddle link

【问题讨论】：

我认为你应该使用 background-image 并将 X 重复到 100%
不，实际上我想动态地为这条线着色，颜色将由用户选择，线将用所选颜色着色，因此不能使用图像
我认为最好的办法是在 svg 文件中根据需要创建这些线条，将其放在水平线条元素中并给它width:100%; overflow:hidden;
@AminJafari 喜欢这个jsfiddle.net/Lq8erreo/6
非常感谢@AminJafari

标签： html css pseudo-class

【解决方案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>

【讨论】：

什么都没有。
你为什么把它交给:before伪元素？它也适用于.horizontal-line => jsfiddle.net/Ln428h6n/4
是的。明显的。但我认为他之前想要的，这就是为什么
感谢您的帮助！
编辑了@priya_singh fiddle jsfiddle.net/Ln428h6n/6。如果用户可以改变颜色。通过将背景颜色更改为 p 标签来处理它

【解决方案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>

【讨论】：

【解决方案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

【讨论】：

【解决方案4】：

如果它确实需要是///-line，那么您可以使用图像来欺骗它。 ;)

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

【讨论】：