Insertar carácter especial usando: antes de pseudo clase en css

Estaba jugueteando con la pseudo clase :before en css, tratando de insertar un carácter especial pero el resultado no es el que esperaba.Insertar carácter especial usando: antes de pseudo clase en css

Usando:

.read_more:before { 
    content: "»"; 
    margin-right: 6px; 
}

me sale el personaje que quiero, pero con un carácter Â ante él y usando:

.read_more:before { 
    content: "&raquo;"; 
    margin-right: 6px; 
}

tengo la completa » en la página HTML.

Puedo pensar en un par de maneras de resolver mi problema, pero me preguntaba cuál sería la sintaxis correcta si quisiera utilizar la pseudoclase :before.

Por cierto, mi tipo de documento es:

<!doctype html> 
<html lang="en">

Fuente

2010-11-10 jeroen

intente especificar <meta charset="utf-8">. Lo ideal es que quieras configurar esto en el servidor.

Fuente

2010-11-10 17:02:01

HTML5 es UTF-8 por omisión. – Tae

@Tae - http://static.medero.org/kak.html el servidor dicta la codificación si no se especifica en la página en sí ... y porque no especificó explícitamente UTF-8 es obvio que necesita . –

Gracias, de hecho fue un error en la metaetiqueta, se estableció en algo ISO ... – jeroen

Su navegador no usa la codificación de texto correcta, es decir, no está utilizando la misma codificación de texto que su editor. Si recibe la página de un servidor web, el mejor enfoque es asegurarse de que el servidor envíe el encabezado de tipo de contenido adecuado. Si no tiene control sobre los encabezados del servidor web, o si va a realizar muchas pruebas con archivos HTML locales, agregue appropriate tags a su documento para la codificación y la versión HTML que está utilizando. Recomiendo usar UTF-8. El archivo CSS (si está separado del HTML) debe usar la misma codificación.

Fuente

2010-11-10 17:05:21 kindall

probar esto

.read_more:before { 
    content: "\00BB"; 
    margin-right: 6px; 
}

\ 00BB es la representación Unicode de ese carácter. Se debe razonablemente funciona =)

Fuente

2010-11-10 17:08:37

Añadir esto en el html, dentro de la sección <head>

<meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=UTF-8" />

Pero si la página HTML está codificado en PHP, yo preferiría la siguiente:

<?php 
    header("Content-Encoding: utf-8"); 
    header("Content-type: text/html; charset=utf-8"); 
?>

Y no se olvide de guardar cualquier archivo (css, html, php) con codificación UTF-8

Fuente

2010-11-10 17:09:05 Omiod

Gracias, eso es lo que terminé haciendo cuando vi la respuesta de @meder. – jeroen

Debe asegurarse de que todos sus archivos (CSS y HTML) tengan la misma codificación.

Fuente

2010-11-10 17:09:40 Tae

La respuesta ha sido dicho ya, pero quiero hacer referencia a:

tengo la completa » en la página HTML.

Esto se debe a que la propiedad CSS content no se trata como HTML. No está adjuntado al DOM, por lo tanto, no se analiza ninguna marca específica de HTML. Puede insertar un carácter directamente: content: "Ԃ"; o utilizar la notación Unicode: content: "\0504";.

Fuente

2010-11-10 17:11:29 Crozin

Gracias, eso explica también por qué no lo vi en Firebug. – jeroen

Buena explicación, esta era la solución que necesitaba. ¡Aclamaciones! –

Sé que ha pasado un tiempo desde que se hizo esta pregunta, pero en caso de que alguien la necesite hoy en día, encontré la solución para ello.

Here's un gráfico con muchos glifos. Encuentra el que quieres y copia el código hexadecimal para él.

Luego péguelo here para convertir.

Usted obtendrá un valor que tiene este aspecto: \ 00E1 (Valor CSS)

Pega este valor en su 'contenido:' y ser feliz :)

Fuente

2015-08-07 17:32:23

Insertar carácter especial usando: antes de pseudo clase en css

Respuesta

Cuestiones relacionadas