Configurable Dotted/Dashed Lines in Pure CSS

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati illo eius delectus deleniti eligendi tenetur omnis consectetur incidunt doloremque magnam tempore est consequatur tempora autem dolor suscipit deserunt ratione consequuntur!</p>

<hr>
    
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit officia vero sapiente dolores dolorem quasi accusamus ut dicta minus at expedita iure. Ullam rerum perspiciatis dolor quae rem! Accusantium necessitatibus.</p>

CSS

hr {
    padding: 0;
    border: 0;
    height: 5px;
    background: linear-gradient(
        to right,
        black,
        black,
        white 20.1%,
        white
    );
    background-size: 20px 100%;
}