A Line With Some Text In The Left

I'm trying to make a horizontal rule with some text in the left. For example: How to achieve it with CSS ? I have done this But didn't get the expected result h2 { width:100%; tex

Solution 1:

A line can occupy space left by the text (fluiiiid), with the wonders of Flexbox: Codepen

No need for a span: the line is a :pseudo. Layout should be possible with a table layout (CSS, not markup) for better compatibility but I don't care of IE8/9.

h2 {
  display: flex;
    justify-content: stretch;
    align-items: baseline;
  margin: 0.625rem01.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 -->