A Line with some text in the left

Question

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%; text-align:center; border-bottom: 1px solid #000; line-
height:0.1em; margin:10px 0 20px; } 
h2 span { background:#fff; padding:0 10px; }

Check out [`:before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and see it in action: https://jsfiddle.net/no3s54ro/ — Marvin, May 30 '17 at 08:41
After reading your question more carefully, for your scenario the `:after` element will do the job. For the line to fill the remaining space on the right, have a look at *[Title with lines filling remaining space on both sides](https://stackoverflow.com/q/30591488/3162554)* or some of the other questions on stackoverflow. — Marvin, May 30 '17 at 08:49

FelipeAls · Answer 1 · 2017-05-30T09:01:45.857

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.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 -->

A Line with some text in the left

1 Answers1

Linked