How to adjust the width of a hr tag

Question

I\'ve got a problem with setting the width of

---

tag.. I mean I want my

---

tag to be displayed half of the full width like this ima

Answer 1

You can do the following things

• Move <hr /> inside title element [<h2> in this example]
• Add padding-left:25% and padding-right:25% to title element
• Add text-align:center to title element

h2{
  font-size:50px;
  padding:0 25%;
  text-align:center;
}


h2 hr{ width:100%;height:10px;background:#000;}

<h2>
This is a very big title
<hr />
</h2>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

Hope it helps.