Text with a borderline and occupies the remaining width

Question

How can I reach the text and the right border using pure CSS? Check the image below for a sample.

The body has a background image. I made a line using ::after, but I cannot dynamically calculate the gap between the text and border lines on the left. I can set a fixed width for the space if the text is static. But how to do it when the text is dynamic?

---

body,
html{
  height: 100%;
}
body{
  background-image: url(http://webneel.com/wallpaper/sites/default/files/images/01-2014/7-flower-wallpaper.jpg);
}
h1{
  font-size: 30px;
  text-transform: uppercase;
  color: #fff;
  position: relative;
}
h1::after{
  position: absolute;
  content: '';
  width: 80%;
  left: 160px;
  bottom: 5px;
  background-color: #fff;
  height: 1px;
}

<h1>About us</h1>

Run codeHide result

Answer 1

flexbox. h1 display:flex, " " - ::after , flex:1 - , . , .

body, html {
  height: 100%;
}
body {
  background-image: url(http://webneel.com/wallpaper/sites/default/files/images/01-2014/7-flower-wallpaper.jpg);
}
h1 {
  font-size: 30px;
  text-transform: uppercase;
  color: #fff;
  display: flex;
}
h1::after {
  flex: 1;
  content: '';
  border-bottom: 1px solid #fff;
  position: relative;
  left: 6px;
  top: -6px;
}

<h1>About us</h1>

Hide result

Answer 2

,

body,
html{
  height: 100%;
}
body{
  background-image: url(http://webneel.com/wallpaper/sites/default/files/images/01-2014/7-flower-wallpaper.jpg);
}
h1{
  font-size: 30px;
  text-transform: uppercase;
  color: #fff;
  position: relative;
  overflow: hidden;
}
h1::after{
  position: absolute;
  content: '';
  bottom: 5px;
  width: 100%;
  background-color: #fff;
  height: 1px;
  display: inline-block;
  margin-left: 10px;
}

<h1>About us</h1>

Hide result