JSFiddle - React, Tailwind, and code Playground

and … yet another try at the inline-padding thing

by CBroe

HTML

<p class="w3"><span class="line">Lorem ipsum dolor sit amet, consetetur<span class="br shy"></span>sadip scing elitr, sed diam nonumy eir<span class="br"> </span>mod tempor invidunt ut labore et dolore<span class="br"> </span>magna ali quyam erat, sed diam voluptua.<span class="br"> </span>At vero eos et accusam et justo duo do<span class="br shy"></span>lores et ea rebum. Stet clita kasd gub<span class="br shy"></span>ergren. Stet clita kasd gubergren.</span></p>

<p class="w2"><span class="line">Lorem ipsum dolor sit amet, consetetur<span class="br shy"></span>sadip scing elitr, sed diam nonumy eir<span class="br"> </span>mod tempor invidunt ut labore et dolore<span class="br"> </span>magna ali quyam erat, sed diam voluptua.<span class="br"> </span>At vero eos et accusam et justo duo do<span class="br shy"></span>lores et ea rebum. Stet clita kasd gub<span class="br shy"></span>ergren. Stet clita kasd gubergren.</span></p>

<p class="w1"><span class="line">Lorem ipsum dolor sit amet, consetetur<span class="br shy"></span>sadip scing elitr, sed diam nonumy eir<span class="br"> </span>mod tempor invidunt ut labore et dolore<span class="br"> </span>magna ali quyam erat, sed diam voluptua.<span class="br"> </span>At vero eos et accusam et justo duo do<span class="br shy"></span>lores et ea rebum. Stet clita kasd gub<span class="br shy"></span>ergren. Stet clita kasd gubergren.</span></p>

CSS

p { line-height:1.5; margin:0 0 2em 0; }
.line { display:inline; background:#333; color:#fff; line-height:2.25; padding:.25em; white-space:pre; }
x.line span { border-left:3px solid blue; }
p.w3 .line span:nth-child(3n), p.w2 .line span:nth-child(2n), p.w1 .line span:nth-child(1n) { }

p.w3 .line span:nth-child(3n):after, p.w2 .line span:nth-child(2n):after, p.w1 .line span:nth-child(1n):after { content:"\0a\20"; white-space:pre; }
p.w3 .line span.shy:nth-child(3n):after, p.w2 .line span.shy:nth-child(2n):after, p.w1 .line span.shy:nth-child(1n):after { content:"- \0a\20"; white-space:pre; }