html - Horizontal line <hr /> with variable dash length

Question

Horizontal line

how to create the horizontal line with dash length as shown in image using CSS. This is what i've tried

CSS

hr{
border-bottom: 1px dotted grey;
}

but i am unable get the same stroke length as shown in the image.

Answer 1

Try the below code: Use border css property.

hr{
    border: 1px dashed #ccc;
}

<p> hello </p>
<hr/>