Reducing the space of an hr to the element above

Question

Does anybody know how to reduce the space of an hr to the element above? My current style looks like this:

hr.hrabt {
  border: 5px solid black;
  border-radius: 5px;
  width: 7%;
  margin-left: 0;
}

As result, I get following:

I would like it to look like this though: I already tried several things not working, like setting the top margin to 0.

Answer 1

As an alternative, I'd recommend dropping the horizontal rule entirely and simply adding a border to your headings.

h1 {
  border-bottom: 0.1em solid #000;
}