Ajout d'entités HTML à l'aide de contenu CSS

Comment utilisez-vous la propriété CSS content pour ajouter des entités HTML ?

Utiliser quelque chose comme ça imprime simplement  à l'écran au lieu de l'espace insécable:

.breadcrumbs a:before {
    content: ' ';
}

Vous devez utiliser l'unicode échappé:

Comme

.breadcrumbs a:before {
    content: '\0000a0';
}

Plus d'informations sur: http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

CSS n'est pas HTML.  est une référence de caractère nommée en HTML; équivalent à la référence de caractère numérique décimal  . 160 est le point de code décimal du NO-BREAK SPACEcaractère en Unicode (ou UCS-2 ; voir la spécification HTML 4.01 ). La représentation hexadécimale de ce point de code est U + 00A0 (160 = 10 × 16 ¹ + 0 × 16 ⁰ ). Vous le trouverez dans les tableaux de codes Unicode et la base de données de caractères .

En CSS, vous devez utiliser une séquence d'échappement Unicode pour ces caractères, qui est basée sur la valeur hexadécimale du point de code d'un caractère. Vous devez donc écrire

.breadcrumbs a:before {
  content: '\a0';
}

Cela fonctionne tant que la séquence d'échappement arrive en dernier dans une valeur de chaîne. Si les caractères suivent, il y a deux façons d'éviter une mauvaise interprétation:

a) (mentionné par d'autres) Utilisez exactement six chiffres hexadécimaux pour la séquence d'échappement:

.breadcrumbs a:before {
  content: '\0000a0foo';
}

b) Ajoutez un caractère d'espace blanc (par exemple, espace) après la séquence d'échappement:

.breadcrumbs a:before {
  content: '\a0 foo';
}

(Puisque fest un chiffre hexadécimal, \a0fcela signifierait autrement GURMUKHI LETTER EEici, ou ਏ si vous avez une police appropriée.)

L'espace blanc délimitant sera ignoré, et cela sera affiché  foo, où l'espace affiché ici serait un NO-BREAK SPACEcaractère.

L'approche en espace blanc ( '\a0 foo') présente les avantages suivants par rapport à l'approche à six chiffres ( '\0000a0foo'):

• il est plus facile à taper , car les zéros non significatifs ne sont pas nécessaires et les chiffres n'ont pas besoin d'être comptés;
• il est plus facile à lire , car il y a un espace blanc entre la séquence d'échappement et le texte suivant, et les chiffres n'ont pas besoin d'être comptés;
• il nécessite moins d'espace , car les zéros non significatifs ne sont pas nécessaires;
• il est compatible vers le haut , car Unicode prenant en charge les points de code au-delà de U + 10FFFF nécessiterait à l'avenir une modification de la spécification CSS.

Ainsi, pour afficher un espace après un caractère d'échappement, utilisez deux espaces dans la feuille de style -

.breadcrumbs a:before {
  content: '\a0  foo';
}

- ou le rendre explicite:

.breadcrumbs a:before {
  content: '\a0\20 foo';
}

Voir CSS 2.1, section "4.1.3 Caractères et casse" pour plus de détails.

Mise à jour : PointedEars mentionne que le remplacement correct  dans toutes les situations css
'\a0 'impliquerait que l'espace est un terminateur de la chaîne hexadécimale et est absorbé par la séquence d'échappement. Il a en outre souligné cette description faisant autorité qui semble être une bonne solution au problème que j'ai décrit et résolu ci-dessous.

Ce que vous devez faire est d'utiliser l'unicode échappé. Malgré ce qu'on vous a dit, ce \00a0n'est pas un substitut parfait pour  CSS; alors essayez:

content:'>\a0 ';          /* or */
content:'>\0000a0';       /* because you'll find: */
content:'No\a0 Break';    /* and */
content:'No\0000a0Break'; /* becomes No Break as opposed to below */

Utilisant spécifiquement \0000a0as  . Si vous essayez, comme suggéré par mathieu et millikin:

content:'No\00a0Break'   /* becomes No਋reak */

Il prend le B dans les caractères d'échappement hexadécimaux. La même chose se produit avec 0-9a-fA-F.

En CSS, vous devez utiliser une séquence d'échappement Unicode à la place des entités HTML. Ceci est basé sur la valeur hexadécimale d'un caractère.

J'ai trouvé que la façon la plus simple de convertir un symbole en son équivalent hexadécimal est, comme de ▾ ( ▾) à, \25BEd'utiliser la calculatrice Microsoft =)

Oui. Activez le mode programmeurs, activez le système décimal, entrez 9662, puis passez en hexadécimal et vous obtiendrez 25BE. Ensuite, ajoutez simplement une barre oblique inverse \au début.

Utilisez le code hexadécimal pour un espace insécable. Quelque chose comme ça:

.breadcrumbs a:before {
    content: '>\00a0';
}

Il existe un moyen de coller un nbsp- ouvrez CharMap et copiez le caractère 160 . Cependant, dans ce cas, je l'espérerais probablement avec un rembourrage, comme ceci:

.breadcrumbs a:before { content: '>'; padding-right: .5em; }

display:inline-blockCependant, vous devrez peut-être définir le fil d'Ariane ou quelque chose.

Par exemple :

http://character-code.com/arrows-html-codes.php

Exemple: Si vous voulez sélectionner votre personnage, j'ai sélectionné "& # 8620" "& # x21ac" (Nous utilisons des valeurs HEX )

.breadcrumbs a:before {
    content: '\0021ac';
}

Résultat: ↬

C'est ça :)

Je sais que c'est un assez vieux post, mais si l'espacement est tout ce que vous recherchez, pourquoi pas simplement:

.breadcrumbs a::before {
    content: '>';
    margin-left: 8px;
    margin-right: 8px;
}

J'ai déjà utilisé cette méthode auparavant. Il enveloppe parfaitement les autres lignes avec ">" à ses côtés lors de mes tests.

Voici deux façons:

• En HTML:

  <div class="ics">&#9969;</div>

Cela se traduira par ⛱

• En CSS:

  .ics::before {content: "\9969;"}

avec du code HTML <div class="ics"></div>

Cela se traduit également par ⛱