Karle Karle - 3 months ago 10
CSS Question

text divided in a paragraph

I tried to have my text in a black background paragraph divided with white lines. I succeeded with text-decoration underline; the only problem is it won't stretch to full width and it's not perfect for the last line. Is there another solution? thanks guys

this is how it should look

enter image description here

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;
}

Answer

You can use a linear gradient to get the 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 the pixel values to position the lines exactly where you need.

Comments