Pure CSS Blockquote

Con el siguiente ejemplo podremos dar un estilo de cita sin la necesidad de utilizar una imagen de fondo. Para ello se utiliza el pseudo-elemento :before.

Ver ejemplo en funcionamiento » »

CSS:

<blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae!
<cite>Somebody famous</cite>
</blockquote>

HTML:

blockquote {
	font-family: Georgia, serif;
	font-size: 18px;
	font-style: italic;
	width: 500px;
	margin: 0.25em 0;
	padding: 0.25em 40px;
	line-height: 1.45;
	position: relative;
	color: #383838;
}
blockquote:before {
	display: block;
	content: "\201C";
	font-size: 80px;
	position: absolute;
	left: -20px;
	top: -20px;
	color: #7a7a7a;
}
blockquote cite {
	color: #999999;
	font-size: 14px;
	display: block;
	margin-top: 5px;
}
blockquote cite:before {
	content: "\2014 \2009";
}

Visto en webmaster-source » »