Adicionando entidades HTML usando conteúdo CSS

Como você usa a propriedade CSS content para adicionar entidades HTML ?

Usar algo assim apenas imprime  na tela em vez do espaço ininterrupto:

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

Você precisa usar o unicode de escape:

Gostar

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

Mais informações em: http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

CSS não é HTML.  é uma referência de caractere nomeado em HTML; equivalente à referência decimal de caracteres numéricos  . 160 é o ponto de código decimal do NO-BREAK SPACEcaractere em Unicode (ou UCS-2 ; consulte a especificação HTML 4.01 ). A representação hexadecimal desse ponto de código é U + 00A0 (160 = 10 × 16 ¹ + 0 × 16 ⁰ ). Você encontrará isso nos gráficos de códigos Unicode e no banco de dados de caracteres .

No CSS, você precisa usar uma sequência de escape Unicode para esses caracteres, com base no valor hexadecimal do ponto de código de um caractere. Então você precisa escrever

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

Isso funciona desde que a sequência de escape seja a última em um valor de sequência. Se os caracteres seguirem, há duas maneiras de evitar erros de interpretação:

a) (mencionado por outros) Use exatamente seis dígitos hexadecimais para a sequência de escape:

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

b) Adicione um caractere de espaço em branco (por exemplo, espaço) após a sequência de escape:

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

(Como fé um dígito hexadecimal, de \a0foutra forma significaria GURMUKHI LETTER EEaqui ou ਏ se você tiver uma fonte adequada.)

O espaço em branco delimitador será ignorado, e isso será exibido  foo, onde o espaço exibido aqui seria um NO-BREAK SPACEcaractere.

A abordagem de espaço em branco ( '\a0 foo') possui as seguintes vantagens sobre a abordagem de seis dígitos ( '\0000a0foo'):

• é mais fácil digitar , porque os zeros à esquerda não são necessários e os dígitos não precisam ser contados;
• é mais fácil de ler , porque há espaço em branco entre a sequência de escape e o texto a seguir, e os dígitos não precisam ser contados;
• que requer menos espaço , porque zeros à esquerda não são necessárias;
• é compatível com versões anteriores , porque o Unicode que suporta pontos de código além de U + 10FFFF no futuro exigiria uma modificação da Especificação CSS.

Portanto, para exibir um espaço após um caractere de escape, use dois espaços na folha de estilo -

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

- ou torne explícito:

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

Veja CSS 2.1, seção "4.1.3 Caracteres e maiúsculas" para detalhes.

Atualização : PointedEars menciona que o substituto correto  em todas as situações css
'\a0 'implicaria que o espaço é um terminador da cadeia hexadecimal e é absorvido pela sequência de escape. Ele ressaltou ainda essa descrição autorizada, que soa como uma boa solução para o problema que descrevi e corrigi abaixo.

O que você precisa fazer é usar o unicode escapado. Apesar do que lhe foi dito, \00a0não é um substituto perfeito para o  CSS; então tente:

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

Especificamente usando \0000a0como  . Se você tentar, conforme sugerido por mathieu e millikin:

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

Leva o B para os caracteres hexadecimais com escape. O mesmo ocorre com 0-9a-fA-F.

No CSS, você precisa usar uma sequência de escape Unicode no lugar de Entidades HTML. Isso é baseado no valor hexadecimal de um caractere.

Eu descobri que a maneira mais fácil de converter símbolo em seu equivalente hexadecimal é, como de ▾ ( ▾) \25BEpara, usando a calculadora da Microsoft =)

Sim. Ative o modo de programadores, ligue o sistema decimal, entre 9662e depois mude para hexadecimal e você obterá 25BE. Em seguida, basta adicionar uma barra invertida \no início.

Use o código hexadecimal para um espaço sem quebra. Algo assim:

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

Existe uma maneira de colar um nbspCharMap aberto e copiar o caractere 160 . No entanto, nesse caso, eu provavelmente colocaria espaço no preenchimento, assim:

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

Você pode precisar definir a farinha de rosca display:inline-blockou algo assim.

Por exemplo :

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

Exemplo: Se você deseja selecionar seu personagem, eu selecionei "& # 8620" "& # x21ac" (usamos valores HEX )

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

Resultado: ↬

É isso aí :)

Eu sei que este é um post bastante antigo, mas se o espaçamento for todo o seu depois, por que não simplesmente:

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

Eu já usei esse método antes. Ele envolve perfeitamente outras linhas com ">" ao lado nos meus testes.

Aqui estão duas maneiras:

• Em HTML:

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

Isso resultará em ⛱

• Em Css:

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

com código HTML <div class="ics"></div>

Isso também resulta em ⛱