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.

Mobile phones are no longer just for folks on the go. 93% of consumers use their smartphone at home.

1 in 5 visits to a small business mobile website leads to an immediate call to the business

Building HTML and CSS

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
}
Share:
This entry was posted in CSS CheatSheets and tagged . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *