How to keep a <hr> in the bottom of element?

Question

I have a div that I need to put a hr in the end of that.

div {
    border-top: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;
    min-height: 100px;
}

<div> this is a test <hr> </div>

As you see in the above fiddle, that hr is under the text, but I need to set it in the end of div (something like div{border-bottom: 1px solid}).

Note: I cannot use margin-top for hr. Because sometimes there is a lot of text into div and in that case there will be a blank space between hr and text forever. I just want to keep it in the bottom of div when there is one or two line of text.

Well, how can I do that?

Answer 1

You can use position relative + absolute.

div {
  border-top: 1px solid;
  border-left: 1px solid;
  border-right: 1px solid;
  min-height: 100px;
  position: relative;
}
div hr {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  margin: 0;
}

<div>this is a test<hr></div>

UPDATE

The pseudo approach (as commented).

div {
  position: relative;
  border-style: solid;
  border-width: 1px 1px 0 1px;
  min-height: 100px;
}
div:after {
  content: "";
  position: absolute;
  left: 0;
  right: 20px; /*0 without gap*/
  bottom: 0;
  border-bottom: 1px solid;
}

<div>this is a test</div>

Answer 2

You need to absolutely position the hr to the bottom of the div, and make sure the div uses relative positioning.

div {
position: relative;
}

div hr {
position: absolute;
bottom: 0;
left: 0;
/* additional style declarations here such as width */
}