html - Multiline text underline with paddings and 100% width -

I am trying to create an underlined multilingual text that should be displayed on the image below:

Text decoration does not work in the way I need it - I'm 100% width And paddings on left and right I have tried to use the inline text and the range below, but in that situation I do not set the width and padding Awareness I tried to use photo backgrounds - but it does not look like a flexible solution - I create an image for every font-size so that it can be repeated.

Can anyone help me?

Thank you in advance!

I know the only way to do this and it is described by Chris Sier @ CSS-Tricks In the article

It depends on known line-height and a repeating background gradient.

SCSS

  $ lh: 1em; . Warper {Width: 50%; Margin: 25px Auto; }. Wiper {line-height: $ lh; Padding: $ lh * 2; Background image: Repetition-linear-shield (below, RGBA (black, 0) 0, RGBA (black, 0) $ LH / 1EM * 16px-1, RGBA (black, 0.5) $ LH / 1em * 16px-1, RGBA (Black, 0.5) $ LH / 1em * 16px); }  

This is line-height output CSS of 1AM.

  .wrapper {width: 50%; Margin: 25px Auto; }. Wiper {line-height: 1am; Padding: 2am; Background image: -Widk-repeat-linear-gradient (top, transparent 0, transparent 15px, RGBA (0, 0, 0, 0.5) 15px, RGBA (0, 0, 0, 0.5) 16px); Background image: Repetition-linear-gradient (bottom, transparent 0, transparent 15px, RGBA (0, 0, 0, 0.5) 15px, RGBA (0, 0, 0, 0.5) 16px); }  

  & lt; Div class = "wrapper" & gt; & Lt; P & gt; To use advertising, varitatis, magny, sint, if it's possible you can tell about how it can be! Can not release in any way, either in any way or as another, sit, fugitive, nation queue, we remember once again, but we are never! & Lt; / P & gt; & Lt; / Div & gt;