web-dev-qa-db-fra.com

Insérer un caractère spécial en utilisant: avant la pseudo-classe dans css

Je jouais avec la pseudo-classe :before Dans css, essayant d'insérer un caractère spécial mais le résultat n'est pas ce que j'espérais.

En utilisant:

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

J'obtiens le caractère que je veux, mais avec un caractère  devant et en utilisant:

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

J'obtiens le » Complet sur la page html.

Je peux penser à quelques façons de résoudre mon problème, mais je me demandais quelle serait la syntaxe correcte si je voulais utiliser la pseudo-classe :before.

Au fait, mon doctype est:

<!doctype html>
<html lang="en">
htmlcssencodingspecial-characterspseudo-class
31
jeroen

Essayez de spécifier <meta charset="utf-8">. Idéalement, vous souhaitez définir cela sur le serveur.

14
meder omuraliev

essaye ça

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

\ 00BB est la représentation unicode de ce caractère. Cela devrait fonctionner raisonnablement =)

48
fcalderan

La réponse a déjà été donnée, mais je veux faire référence à:

J'obtiens le &raquo; Complet sur la page html.

En effet, la propriété CSS content n'est pas traitée en HTML. Il n'est pas ajouté au DOM, donc tout balisage spécifique au HTML n'est pas analysé. Vous pouvez insérer directement un caractère: content: "Ԃ"; Ou utiliser la notation Unicode: content: "\0504";.

20
Crozin

Je sais que cela fait un moment que cette question n'a pas été posée, mais au cas où quelqu'un en aurait besoin de nos jours, j'ai trouvé la solution.

Voici un graphique avec beaucoup de glyphes. Trouvez celui que vous voulez et copiez le code hexadécimal correspondant.

Ensuite, collez-le ici pour convertir.

Vous obtiendrez une valeur qui ressemble à ceci:\00E1 (valeur CSS)

Collez cette valeur sur votre "contenu:" et soyez heureux :)

7
Andre Lopes

Votre navigateur n'utilise pas l'encodage de texte correct, c'est-à-dire qu'il n'utilise pas le même encodage de texte que votre éditeur. Si vous recevez la page d'un serveur Web, la meilleure approche consiste à vous assurer que le serveur envoie l'en-tête Content-Type approprié. Si vous n'avez aucun contrôle sur les en-têtes du serveur Web, ou si vous allez effectuer de nombreux tests à l'aide de fichiers HTML locaux, ajoutez balises appropriées à votre document pour l'encodage et la version HTML que vous utilisez . Je recommande d'utiliser UTF-8. Le fichier CSS (s'il est distinct du HTML) doit utiliser le même encodage.

2
kindall

Ajoutez ceci sur le html, à l'intérieur du <head> section

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

Mais si la page html est codée en PHP, je préférerais ce qui suit:

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

Et n'oubliez pas de sauvegarder n'importe quel fichier (css, html, php) avec l'encodage UTF-8

1
Omiod

Vous devez être sûr que tous vos fichiers (CSS et HTML) ont le même encodage.

0
Tae