Aggiunta di entità HTML mediante contenuto CSS

Come si usa la proprietà CSS content per aggiungere entità HTML ?

Usando qualcosa di simile si stampa  sullo schermo anziché nello spazio non-break:

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

Devi usare l'unicode con escape:

Piace

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

Maggiori informazioni su: http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

CSS non è HTML.  è un riferimento di carattere denominato in HTML; equivalente al riferimento al carattere numerico decimale  . 160 è il punto decimale del NO-BREAK SPACEcarattere in Unicode (o UCS-2 ; vedi la specifica HTML 4.01 ). La rappresentazione esadecimale di quel punto di codice è U + 00A0 (160 = 10 × 16 ¹ + 0 × 16 ⁰ ). Lo troverai nel database dei codici Unicode e dei caratteri .

In CSS è necessario utilizzare una sequenza di escape Unicode per tali caratteri, che si basa sul valore esadecimale del punto di codice di un carattere. Quindi devi scrivere

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

Funziona finché la sequenza di escape arriva per ultima in un valore di stringa. Se i personaggi seguono, ci sono due modi per evitare errori di interpretazione:

a) (menzionato da altri) Utilizzare esattamente sei cifre esadecimali per la sequenza di escape:

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

b) Aggiungere un carattere spazio (ad es. spazio) dopo la sequenza di escape:

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

(Dato che fè una cifra esadecimale, \a0fsignificherebbe altrimenti GURMUKHI LETTER EEqui, o ਏ se si dispone di un carattere adatto.)

Lo spazio bianco delimitante verrà ignorato e questo verrà visualizzato  foo, in cui lo spazio visualizzato qui sarebbe un NO-BREAK SPACEcarattere.

L'approccio con spazi bianchi ( '\a0 foo') presenta i seguenti vantaggi rispetto all'approccio a sei cifre ( '\0000a0foo'):

• è più facile da scrivere , poiché gli zeri iniziali non sono necessari e non è necessario contare le cifre;
• è più facile da leggere , perché c'è uno spazio bianco tra la sequenza di escape e il testo seguente e non è necessario contare le cifre;
• esso richiede meno spazio , perché zeri iniziali non sono necessari;
• è compatibile con le versioni successive , poiché Unicode che supporta punti di codice oltre U + 10FFFF in futuro richiederebbe una modifica delle specifiche CSS.

Pertanto, per visualizzare uno spazio dopo un carattere di escape, usa due spazi nel foglio di stile -

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

- o renderlo esplicito:

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

Vedi CSS 2.1, sezione "4.1.3 Caratteri e caso" per i dettagli.

Aggiornamento : PointedEars menziona che il corretto sostituto  in tutte le situazioni CSS
'\a0 'significherebbe che lo spazio è un terminatore della stringa esadecimale ed è assorbito dalla sequenza di escape. Ha inoltre sottolineato questa descrizione autorevole che sembra una buona soluzione al problema che ho descritto e risolto di seguito.

Quello che devi fare è usare l'unicode con escape. Nonostante ciò che ti è stato detto \00a0non è un perfetto sostituto  all'interno dei CSS; allora prova:

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

Specificamente usando \0000a0come  . Se ci provi, come suggerito da Mathieu e Millikin:

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

Prende la B nell'esagono sfuggito ai personaggi. Lo stesso accade con 0-9a-fA-F.

Nel CSS è necessario utilizzare una sequenza di escape Unicode al posto delle Entità HTML. Questo si basa sul valore esadecimale di un personaggio.

Ho scoperto che il modo più semplice per convertire il simbolo nel loro equivalente esadecimale è, ad esempio da ▾ ( ▾) a \25BEè usare la calcolatrice Microsoft =)

Sì. Abilita la modalità programmatori, attiva il sistema decimale, entra 9662, quindi passa all'esagono e otterrai 25BE. Quindi aggiungi una barra rovesciata \all'inizio.

Utilizzare il codice esadecimale per uno spazio non interrotto. Qualcosa come questo:

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

C'è un modo per incollare una nbsp- CharMap aperta e copiare il carattere 160 . Tuttavia, in questo caso probabilmente lo spazio con imbottitura, in questo modo:

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

Potrebbe essere necessario impostare il pangrattato display:inline-blocko qualcosa del genere, però.

Per esempio :

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

Esempio: se vuoi selezionare il tuo personaggio, ho selezionato "& # 8620" "& # x21ac" (Utilizziamo valori esadecimali )

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

Risultato: ↬

Questo è tutto :)

So che questo è un post piuttosto vecchio, ma se lo spazio è tutto tuo dopo, perché non semplicemente:

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

Ho usato questo metodo prima. Si adatta perfettamente ad altre linee con ">" al suo fianco nei miei test.

Ecco due modi:

• In HTML:

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

Ciò si tradurrà in ⛱

• In Css:

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

con codice HTML <div class="ics"></div>

Ciò si traduce anche in ⛱