-1

I want to achieve something like this -

enter image description here

My approach was to take a hr tag and divide it and try to customize it. But in doing that, I am not getting any result. I need help with getting this logic or if there is a better alternative, please share with me !

Thanks !!

Itika Bandta
  • 163
  • 1
  • 2
  • 12
  • Like [this](https://stackoverflow.com/questions/16819864/how-to-create-a-dotted-hr-tag), or [this](https://www.w3schools.com/howto/howto_css_style_hr.asp) or [this](https://stackoverflow.com/questions/33391217/horizontal-line-hr-with-variable-dash-length)? Or is it important that the dashes have varying lengths? – lucidbrot Jul 27 '20 at 09:33
  • @lucidbrot This won't work because image asked in question shows dotted line with varying lengths :) – Pritesh Jul 27 '20 at 09:36
  • The question is not about borders... To achieve the same result as on your attached image, use :after and :before with position: absolute, and align them as you wish. – csba Jul 27 '20 at 09:38

1 Answers1

-1

You can set a css border on the top or bottom of the hr and apply the dash setting.

hr {
border-top: 4px dashed red;
<!DOCTYPE html>
<html>
<body>

<h1>Lorem ipsum</h1>
<hr>


</body>
</html>

Or use multiple hr's set as inline blocks with different widths.

.inlineHr  {
display: inline-block;
border-top: 4px solid black;
}

.hr1 {
width:120px;
}

.hr2 {
width: 60px;
mergin-left: 10px;
}

.hr3 {
width: 20px;
mergin-left: 10px;
}
<!DOCTYPE html>
<html>
<body>

<h1>Lorem ipsum</h1>
<hr class='inlineHr hr1' />
<hr class='inlineHr hr2' />
<hr class='inlineHr hr3' />

<p>Here is the following text</p>

</body>
</html>
Vanquished Wombat
  • 9,075
  • 5
  • 28
  • 67