CSS Multi-Line Padded Text

by Ben Gillbanks

HTML

<!--
	- Can't add additional elements/ javascript
	- Bottom margins don't work.
	- Want to hide the pseudo element and have proper gaps between the paragraphs.
-->
<blockquote>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque aliquet lorem viverra, volutpat quam vitae, pretium risus.
	</p>
	<p>
		Donec in auctor orci. Integer id posuere velit. Aliquam gravida mauris ante, eget molestie lacus lobortis at.
	</p>
	<p>
		Vivamus vel nunc dui. Maecenas vitae cursus dui.
	</p>
	<p><cite>Bob the Builder</cite></p>
</blockquote>

SCSS

blockquote {
	
	width: 300px;
	padding: 40px;
	font-family: arial, sans-serif;
	line-height: 1.5;
	
	cite {
		
		font-size: 0.8em;
		text-transform: uppercase;
		letter-spacing: 0.15em;
		
	}
	
}

p {
	
	span {
		display: inline;
		padding: 0.5em 0;
		background: lightblue;
		box-decoration-break: clone;
		box-shadow: 1em 0 0 lightblue, -1em 0 0 lightblue;
	}

}

JavaScript

$(document).ready(
	function() {
		$( 'p' ).not( 'p:has(cite)' ).wrapInner( '<span></span>' );
	}
);