Bloques entrecomillados con :after y :before + ejemplos

Tiempo atr?s vimos c?mo personalizar los bloques entrecomillados aplicando estilos simples tales como un borde y un color de fondo.

Ahora no nos limitaremos tanto, y usaremos las pseudoclases :after y :before para que los bloques entrecomillados (blockquotes) tengan comillas, al inicio y al final de la cita. Adem?s usaremos un poco m?s de CSS para hacerlos m?s vistosos.

La pseudoclase :before nos ayudar? a poner "algo" antes del bloque entrecomillado, mientras que :after lo pondr? despu�s.

?Y qu� pondr?? Aqu? entra la propiedad content a echarnos la mano, podremos usar comillas o im?genes para darle estilo a nuestro bloque.

El c?digo base para entender de lo que hablamos es este:

.post-body blockquote:before {
content: "\201C";
}
.post-body blockquote:after {
content: "\201D";
}

Ah? indicamos que antes del bloque usaremos la comilla de apertura \201C que traducido al cristiano es esta: �
Y al final del bloque usaremos la comilla de cierre \201D que es esta: �
Tambi�n podemos usar open-quote y close-quote en su lugar.

.post-body blockquote:before {
content: open-quote;
}
.post-body blockquote:after {
content: close-quote;
}

O bien, una imagen, en la cual la primera ser?a la imagen de la comilla de apertura y la segunda ser?a la imagen de la comilla de cierre:

.post-body blockquote:before {
content: url(URL de la imagen);
}
.post-body blockquote:after {
content: url(URL de la imagen);
}

Teniendo la base podemos crear diferentes estilos, este ser?a uno muy sencillo:

.post-body blockquote {
background:#F7F8E0; /* Color de fondo */
padding:10px;
}
.post-body blockquote:before {
content: "\201C";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post-body blockquote:after {
content: "\201D";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding-top:10px;
}

A este le podemos aplicar un fondo gradiente y sombras:

.post-body blockquote {
padding:10px;
border-color: #999; /* Color del borde */
background: -webkit-linear-gradient(top, white, #E0E0E0); /* Gradientes */
background: -moz-linear-gradient(top, #fff, #E0E0E0);
background: -ms-linear-gradient(top, #fff, #E0E0E0);
background: -o-linear-gradient(top, #fff, #E0E0E0);
box-shadow: 0px 0px 15px #000000; /* Sombra */
}
.post-body blockquote:before {
content: "\201C";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post-body blockquote:after {
content: "\201D";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding-top:10px;
}

A este lo haremos m?s "divertido" poni�ndole un color m?s vivo y gir?ndolo un poco:

.post-body blockquote {
border-radius: 5px; /* Borde redondeado */
box-shadow: 5px 5px 2px #696969; /* Sombra */
-webkit-transform: rotate(-4deg); /* Rotaci?n */
-moz-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
background-color: #F4A460; /* Color de fondo */
padding: 10px;
color: #FFFFFF; /* Color del texto */
}
.post-body blockquote:before {
content: "\201C";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post-body blockquote:after {
content: "\201D";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding-top:10px;
}

Y a este le pondremos una imagen animada como comillas, adem?s de un borde resplandeciente:

.post-body blockquote {
background:#CEECF5;  /* Color de fondo */
padding:10px;
width:85%;
border-radius: 0px 30px; /* Bordes redondeados */
border: 2px solid #fff; /* Borde interior */
-moz-box-shadow: 0 0 15px #D54CB5, inset 0 0 15px #D54CB5;
-webkit-box-shadow: 0 0 15px #D54CB5, inset 0 0 15px #D54CB5;
-goog-ms-box-shadow: 0 0 15px #D54CB5, inset 0 0 15px #D54CB5;
box-shadow: 0 0 15px #D54CB5, inset 0 0 15px #D54CB5;
}
.post-body blockquote:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiopswNR_kOxbKh6ksZSfwBRHKchQebe7f-0EiCquXauKDk1Yyn1gmMUMUGcLG4ycHtlrDDt8tQpg0yVal-OihHPshG5OhrxE02VW4EemnYaD_BcdqcBRzeAiWMOFvSiOgYT421sX8dqz0/s52/comilla1.gif);
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post-body blockquote:after {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMRMY0GpswjWZ_AXWPVLNhGipI_E-BDbOL8wp0PZrKLSplugcYiD4yy3gea_5RfDM1Gp7QfXlJMrkFzPM4QcuI2-doaAanf9zGcI_T5EQBkjYC1OA8wZ2QaJdOnokHG-jimOkGrTSu2EM/s39/comilla2.gif);
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}

Cualquiera de los c?digos anteriores los puedes poner en sustituci?n de los que ya tengas, o bien, sino los tienes definidos puedes ponerlos antes de ]]></b:skin>

Cualquiera de los ejemplos es completamente personalizable, en color verde est?n las anotaciones del ?rea a la que corresponde cada estilo.
En el caso de las comillas ver?s esto:

font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding-top:10px;

font-family es el tipo de fuente, font-size el tama?o de la comilla, font-weight lo pone en negrita con la declaraci?n bold, line-height es el espacio entre l?neas, vertical-align es para alinearlo verticalmente, y padding-top el espacio respecto a la l?nea de arriba.

Ten en cuenta que algunos de estos estilos s?lo se ver?n en navegadores modernos -ya sabes por cu?l lo digo- , pero en el resto se ve perfectamente bien.