Draw Line After A Title With Css

How can I draw a line like after title text like this : 'TITLE ________' In CSS? The '_' should complete the rest of the div and fill the remaining space.

Solution 1:

Based on this answer :

h1{
  overflow:hidden;
}
h1:after{
  content:'';
  display:inline-block;
  width:100%; height:100%;
  margin-right:-100%;
  border-bottom:1px solid #000;
}

<h1>Title</h1><h1>Longer Title</h1>

Solution 2:

h1 {
  position: relative;
}

h1:after {
  content: "";
  position: absolute;
  border-bottom: 1px solid red;
  width: 100%;
  bottom: 0;
}

<h1>Title Here</h1>

Solution 3:

h1:after {
    content: "__________________";
}

Further explanation and examples: :after pseudo class