一行左侧有一些文字

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

不需要跨度：行是：伪。
布局应该可以使用表布局（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 -->