Css text background for space between text lines

Question

I have formatted text: a link to a JSFiddle and I want it to look like this:

How can I do that?

Answer 1

Here it is..

.news_text{ position:relative; float:left; font-family:Arial, Helvetica, sans-serif; font-size:11px; width:220px; background-color:#866b62; color:#FFF; padding:3px; line-height: 1.2em; /*notice line-height*/ overflow: hidden; /*to hide extra transform*/ } .news_text::before{ background:repeating-linear-gradient(transparent,transparent calc(1.2em - 1px),white calc(1.2em - 1px),white calc(1.2em + 0px)); /*that same line-height*/ background-repeat: repeat-y; content: ''; position:absolute; top:3px; /*same as padding*/ bottom: 1em; /*use with care when handling padding*/ left:0; right: 0; } .news_text::after{ content:'------'; /*'' blank was not working on inline-block*/ color:transparent; /*to hide '------'*/ background-color: white; /*same as background*/ position: relative; display: inline-block; transform-origin: top left; transform:scale(20,2) scaleY(1.1); /*adjust based on your content*/ } 

 <span id="news_text" class="news_text"> Maecenas tempus rhoncus nisl, eu lorem blandit a consectetuer adipiscing Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur libero nobis, ut itaque, quibusdam, cumque corporis optio dignissimos consequatur voluptatum cum, provident officia </span> 

I don’t know why I spent so much time on this ....