疑似CSSを使用して水平線をコンテナの幅に合わせる

Question

水平線を配置するコンテナの幅に合わせて水平線を作成したい。並べ替え要素は次のようになります。

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

水平ルールと非常によく似ています。私はそれを試みましたが、100％の幅は、擬似要素のcontentプロパティに十分なスラッシュを入れた場合にのみ取得されます。

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

結果は次のとおりです：

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

はここに私のCSSコードです：

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

しかし、それは、外側のdivの100％の幅にまたがっていないここに私のHTMLコードです。そうするために、私はコンテンツのプロパティにスラッシュを入れなければなりません。私はこれを達成するための代替とより良い方法があることを知っています。

P.S：私は擬似要素で作業するのはあまり良くありませんし、何か間違っている可能性があります。誰も指摘できますか？

編集：コンテンツプロパティにスラッシュを多く置くと、小さなコンテナに置いたときに水平線が2行になります。 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プロパティでこれを達成することができます：それは実際に/// -lineにする必要がある場合は、その後、

.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

あなたはcontent非常に長くここに3つのオプション

1. 使用を持っており、それが隠された親のオーバーフローです設定します。
2. あなたのストライプを描画するには、linear-gradientを使用してください。ここでの問題は、グラデーションが貧弱に見える（エイリアスの問題のように見える）ことです。しかし、hereはこれを克服する方法の大きな説明と示唆です。
3. パターンをイメージとし、背景リピートを使用すると、オンラインでパターンを描くことができます。http://www.patternify.com/）とすべての3つのオプションの一例であり、ここでは画像

のちょうど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