html - text divided in a paragraph -

i tried have text in black background paragraph divided white lines. succeeded text-decoration underline; problem won't stretch full width , it's not perfect last line. there solution? guys

this how should

http://codepen.io/hendrikeng/pen/lkxjwo

html:

<h1 class="o-outline--black">lorem ipsum impsum psuspspspspsp</h1> 

css:

.o-outline--black {     width: 30%;     display: block;     text-transform: uppercase;     padding: 0.15em 0.6em 0.15em 0.6em;     background: black;     color: white;     text-decoration: underline;  } 

you can use linear gradient effect you're after:

.o-outline--black {    width: 30%;    text-transform: uppercase;    text-align: center;    padding: 0.15em 0.6em 0.15em 0.6em;    background: black;    color: white;    background-image: repeating-linear-gradient(180deg, transparent, transparent 35px, white 35px, white 40px);  }

<h1 class="o-outline--black">lorem ipsum impsum psuspspspspsp</h1>

you can tweak pixel values position lines need.