带边框线的文字并占用剩余宽度

Question

如何使用纯CSS实现文本和右边框线？请查看下面的示例图片。

身体有背景图像。我使用::after制作了这一行，但我无法动态计算左边文本和边框线之间的差距。如果文本是静态的，我可以为间隙设置固定的宽度。但是当文本是动态的时候我怎么能这样做呢？

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>

Answer 1

尝试使用flexbox。将他h1设为display:flex，即可将文字设为＆＃34;关于我们＆＃34;和::after伪元素来灵活项目，第二个flex:1用于获取最大剩余宽度。最后，根据需要调整位置。

＆＃13;

＆＃13;

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;
}

＆＃13;

<h1>About us</h1>

＆＃13;

＆＃13;

＆＃13;

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>