html - 左边有一些文字的一行

Question

我正在尝试用左侧的一些文本制作一条水平线。例如:

如何用CSS实现？

我这样做了但是没有得到预期的结果

h2 { width:100%; text-align:center; border-bottom: 1px solid #000; line-
height:0.1em; margin:10px 0 20px; } 
h2 span { background:#fff; padding:0 10px; }

Answer 1

一行可以占据文本留下的空间(fluiiiid)，Flexbox的妙用: Codepen

不需要跨度:该行是一个 :pseudo。
布局应该可以使用表格布局(CSS，而不是标记)以获得更好的兼容性，但我不关心 IE8/9。

h2 {
  display: flex;
    justify-content: stretch;
    align-items: baseline;
  margin: 0.625rem 0 1.25rem;
  line-height: 1.5;
  text-transform: uppercase;
  color: #444;
} 

h2:after {
  content: '';
  flex-grow: 1;
  border-bottom: 1px solid #444;
  margin-left: 0.5rem;
}

<h2>work</h2>
<!-- SO 44257291 -->