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

I want to make a a horizontal line spanning to the width of the container in which it is placed. The lined element should look like this: ``` ////////////////////////////////////////////////////////////////// ``` Very much like a horizontal rule. I have tried it but 100% width is taken only when I put enough slashes in the content property of pseudo element. Here is my HTML code: ``` <div style='width: 100%;> <p class='horizontal-line'></p> </div> ``` Here is my CSS code: ``` .horizontal-line:before { content: '///////////////////////////////////////////////////////////////////////////////////'; margin: 0; padding: 0; color: purple; width: 100%; font-size: 10px; } ``` The result is: ``` /////////////////////////////////////////// ``` But it does not span to 100% width of outer div. In order to do so I have to put more slashes in content property. I know there is some alternate and better way to achieve this. P.S: I am not very good at working with pseudo element and might be doing something wrong. Can anyone point out? Edit: And if I place many slashes in content property then the horizontal line goes to two lines when placed in smaller container. Here is fiddle link