CSS Quotes on Centered Text in Paragraph

Let’s do CSS quotes on inline centered text paragraph. It can be used on different text tickers, text slideshows, carousels. I made it with relative and absolute positions.

Examples of different length centered paragraph with quotes:

Works in IE8-9 and other modern browsers. IE7 doesn’t support content CSS property. For IE7 you can add spans with quotes before and after the paragraph. Or add compatibility library javascript.

The HTML we”ll have in this case:

<div class="someDiv">
	<p><span>Mobile phones are no longer 
	just for folks on the go. 93% of 
	consumers use their smartphone 
	at home.</span></p>
</div>

If we just add styled quotes to the text, they will break the text flow and layout.
Add my CSS and you’ll have nice big quotes like in my examples:

.someDiv {
	z-index:1;
	background:#fff;
	padding:30px;
}

.someDiv p {
	font-size:28px;
	padding:10px;
	position:relative;
}

.someDiv p span {
	position:relative
}

.someDiv p span:before {
	content: "“ ";
	font-size: 100px;
	font-weight: bold;
	line-height:20px;
	color:#e4e4e4;
	position:absolute;
	top:20px;
	left:-56px
}

.someDiv p:after {
	content: " ”";
	font-size: 100px;
	font-weight: bold;
	line-height:20px;
	position:absolute;
	bottom:-20px;
	color:#e4e4e4
}