making text above a line on image

Question

I am working on a project where I am trying to make a text above a line on the image on all browser sizes. This will be more clear once you see the codpen link below.

T

Answer 1

If all you really want is text above a black line that has a radius on each end, then you can accomplish much simpler with just CSS.

By wrapping the text and the line in another element, you can then create space above and below the two:

#wrapper {
  margin:100px 0;
}

.underline {
  border:3px solid black;
  border-radius:10px;
}

  
Hello World!