css text element with line behind text on the right

Question

How to make this headline in the css? Preferably without flexbox.

Image:

Answer 1

Although I would expect you to put some code and show us what you have tried, the following is one way to do it.

Essentially you create an after pseudo element, give it a 1px height and a background color of your choice. Then you position it absolutely within it's parent heading element with a lower z-index.

There are possibly better ways of doing it, with flexbox too but I didn't mention that as per the question.

.with-line {
  position: relative;
}
.with-line span {
  /*change it to match whatever background color you want.*/
  background: white;
  
}
.with-line:after {
  position: absolute;
  left: 0;
  right: 0;
  content: "";
  height: 1px;
  background: #666;
  top: 50%;
  z-index: -1;
}

<h1 class="with-line"><span>Hello</span></h1>