Inserire caratteri speciali usando: prima della pseudo classe in css

Mi stavo giocando con la pseudo classe :before in css, cercando di inserire un carattere speciale ma il risultato non era quello che speravo.Inserire caratteri speciali usando: prima della pseudo classe in css

Usando:

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

ottengo il personaggio che voglio, ma con un carattere Â prima di esso e utilizzare:

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

ho la completa » sulla pagina html.

Posso pensare a un paio di modi per risolvere il mio problema, ma mi chiedevo quale sarebbe stata la sintassi corretta se volevo usare la pseudo classe :before.

A proposito, il mio doctype è:

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

fonte

2010-11-10 jeroen

Prova specificando <meta charset="utf-8">. Idealmente si desidera impostare questo nel server.

fonte

2010-11-10 17:02:01

HTML5 è UTF-8 per default. – Tae

@Tae - http://static.medero.org/kak.html il server detta la codifica se non è specificato nella pagina stessa ... e poiché non ha specificato esplicitamente UTF-8 è ovvio che ha bisogno di . –

Grazie, è stato davvero un errore nel meta tag, è stato impostato su ISO qualcosa ... – jeroen

Il browser non sta utilizzando la codifica di testo corretta, ovvero non sta utilizzando la stessa codifica di testo del tuo editor. Se si riceve la pagina da un server Web, l'approccio migliore è assicurarsi che il server invii l'intestazione Content-Type appropriata. Se non si ha il controllo sulle intestazioni del server Web o se si eseguono molti test utilizzando file HTML locali, aggiungere appropriate tags al documento per la codifica e la versione HTML che si sta utilizzando. Raccomando l'uso di UTF-8. Il file CSS (se è separato dall'HTML) dovrebbe usare la stessa codifica.

fonte

2010-11-10 17:05:21 kindall

provare questo

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

\ 00BB è la rappresentazione Unicode di quel personaggio. Esso dovrebbe ragionevolmente funziona =)

fonte

2010-11-10 17:08:37

Aggiungere questo sulla html, all'interno della <head> sezione

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

Ma se la pagina html è codificato in PHP, preferirei il seguente:

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

E non dimenticare di salvare qualsiasi file (css, html, php) con codifica UTF-8

fonte

2010-11-10 17:09:05 Omiod

Grazie, è quello che ho finito quando ho visto la risposta di @ meder. – jeroen

Devi essere sicuro che tutti i tuoi file (CSS e HTML) hanno la stessa codifica.

fonte

2010-11-10 17:09:40 Tae

La risposta è stata già detto, ma voglio fare riferimento a:

ho la completa » sulla pagina html.

Questo perché la proprietà CSS content non è trattata come HTML. Non è aggiunto al DOM, quindi non viene analizzato alcun markup specifico HTML. È possibile inserire direttamente un carattere: content: "Ԃ"; o utilizzare la notazione Unicode: content: "\0504";.

fonte

2010-11-10 17:11:29 Crozin

Grazie, questo spiega anche perché non l'ho visto in Firebug. – jeroen

Una buona spiegazione, questa era la soluzione di cui avevo bisogno. Saluti! –

So che è passato un po 'di tempo da quando è stata posta questa domanda, ma nel caso qualcuno ne avesse bisogno al giorno d'oggi, ho trovato la soluzione per questo.

Here's un grafico con un sacco di glifi. Trova quello che vuoi e copia il codice esadecimale per esso.

Quindi incollarlo here da convertire.

Si otterrà un valore che assomiglia a questo: \ 00E1 (Valore CSS)

Incollare questo valore sulla 'contenuti:' ed essere felici :)

fonte

2015-08-07 17:32:23

Inserire caratteri speciali usando: prima della pseudo classe in css

risposta

Problemi correlati