html - blockquote - Agregar comillas dobles a un párrafo con CSS

comillas grandes css

Question

Digamos que tengo este párrafo:

<p class="myclass">This is my paragraph</p>

¿Cuál es el código CSS para agregar comillas dobles a este párrafo? (Entonces se traducirá "Este es mi párrafo")

.myclass {}

Answer 1

Esto es lo que hice para hacer que las citas en mi blockquote funcionen.

Esto es para la primera comilla:

blockquote:before{content: open-quote;}

y esto es para la segunda comilla:

blockquote:after{content: close-quote;)

Sin embargo, esto solo funciona en CSS3.

Answer 2

En realidad, la respuesta aceptada es incorrecta, o al menos subóptima. Debería ser:

q { quotes: ''/201c'' ''/201d''; }
q:before { content: open-quote; }
q:after { content: close-quote; }

El /201c aquí es Unicode para una comilla doble a la izquierda. No hay ninguna razón por la que no pueda escribir las comillas dobles directamente en la regla para q :

q { quotes: ''“'' ''”''}

open-quote y close-quote son valores especiales para la propiedad de content , que se refieren a las cadenas dadas como valores para la propiedad de quotes .

Ahora puedes decir:

<p><q>This is my paragraph</q></p>

O alguna variante de eso; por supuesto, puede agregar las reglas de before y after directamente en p si lo prefiere:

body { quotes: ''/201c'' ''/201d''; }
p:before { content: open-quote; }
p:after { content: close-quote; }

Esto le permite factorizar los caracteres específicos utilizados para las comillas usando la propiedad de las quotes , sin cambiar todas las reglas de before y after . Por ejemplo, puedes hacer cosas como

:lang(de) { quotes: "»" "«"; }

para obtener cotizaciones de estilo alemán, si el atributo lang se ha configurado como de cualquier antepasado.

La propiedad de quotes realidad le permite especificar conjuntos adicionales de cotizaciones, para usar con comillas anidadas. Ver los documentos para más detalles.

body { quotes: ''/201c'' ''/201d''; }
q:before { content: open-quote; }
q:after { content: close-quote; }
:lang(de) { quotes: "»" "«"; }

<p>Quoth the raven, <q>Never more.</q></p>
<p lang="de">Sprach der Rabe: <q>Nie du Tor.</q></p>

Referencias

• propiedad de quotes
• :lang pseudo-clase
• propiedad de content , con valores de close-quote open-quote close-quote
• q elemento para cadenas citadas

Answer 3

Use pseudo-elements :

p.myclass:before, p.myclass:after {
content: ''"'';
}

Fiddle: http://jsfiddle.net/2bE8j/1/

Answer 4

.myclass:before
{
content: ''/201C'';
}
.myclass:after
{
content: ''/201D'';
}