Agregar entidades HTML usando contenido CSS

¿Cómo se usa la propiedad CSS content para agregar entidades HTML ?

Usar algo como esto solo se imprime  en la pantalla en lugar del espacio sin interrupciones:

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

Tienes que usar el Unicode escapado:

Me gusta

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

Más información en: http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

CSS no es HTML.  es una referencia de caracteres con nombre en HTML; equivalente a la referencia de caracteres numéricos decimales  . 160 es el punto de código decimal del NO-BREAK SPACEcarácter en Unicode (o UCS-2 ; consulte la especificación HTML 4.01 ). La representación hexadecimal de ese punto de código es U + 00A0 (160 = 10 × 16 ¹ + 0 × 16 ⁰ ). Lo encontrará en las tablas de códigos Unicode y la base de datos de caracteres .

En CSS, debe utilizar una secuencia de escape Unicode para dichos caracteres, que se basa en el valor hexadecimal del punto de código de un carácter. Entonces necesitas escribir

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

Esto funciona siempre que la secuencia de escape sea la última en un valor de cadena. Si siguen los caracteres, hay dos formas de evitar interpretaciones erróneas:

a) (mencionado por otros) Use exactamente seis dígitos hexadecimales para la secuencia de escape:

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

b) Agregue un carácter de espacio en blanco (por ejemplo, espacio) después de la secuencia de escape:

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

(Dado que fes un dígito hexadecimal, de \a0flo contrario significaría GURMUKHI LETTER EEaquí, o ਏ si tiene una fuente adecuada).

El espacio en blanco delimitador será ignorado, y esto se mostrará  foo, donde el espacio mostrado aquí sería un NO-BREAK SPACEcarácter.

El enfoque de espacio en blanco ( '\a0 foo') tiene las siguientes ventajas sobre el enfoque de seis dígitos ( '\0000a0foo'):

• es más fácil escribir , porque los ceros a la izquierda no son necesarios y no es necesario contar los dígitos;
• es más fácil de leer , porque hay un espacio en blanco entre la secuencia de escape y el siguiente texto, y no es necesario contar los dígitos;
• que requiere menos espacio , ya que los ceros iniciales no son necesarios;
• es compatible hacia arriba , porque los puntos de código de soporte Unicode más allá de U + 10FFFF en el futuro requerirían una modificación de la especificación CSS.

Por lo tanto, para mostrar un espacio después de un carácter escapado, use dos espacios en la hoja de estilo:

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

- o hacerlo explícito:

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

Consulte CSS 2.1, sección "4.1.3 Caracteres y mayúsculas y minúsculas" para más detalles.

Actualización : PointedEars menciona que el reemplazo correcto  en todas las situaciones CSS
'\a0 'implicaría que el espacio es un terminador de la cadena hexadecimal y es absorbido por la secuencia escapada. Además señaló esta descripción autorizada que parece una buena solución al problema que describí y solucioné a continuación.

Lo que debe hacer es usar el Unicode escapado. A pesar de lo que le han dicho, \00a0no es un sustituto perfecto para  CSS; así que prueba:

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

Específicamente usando \0000a0como  . Si lo intentas, como lo sugieren mathieu y millikin:

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

Lleva la B a los personajes escapados de hex. Lo mismo ocurre con 0-9a-fA-F.

En CSS, debe usar una secuencia de escape Unicode en lugar de Entidades HTML. Esto se basa en el valor hexadecimal de un personaje.

Descubrí que la forma más fácil de convertir el símbolo a su equivalente hexadecimal es, por ejemplo, desde ▾ ( ▾) a \25BEes usar la calculadora de Microsoft =)

Si. Habilite el modo de programadores, encienda el sistema decimal, ingrese 9662, luego cambie a hexadecimal y obtendrá 25BE. Luego, simplemente agregue una barra diagonal inversa \al principio.

Usa el código hexadecimal para un espacio que no se rompa. Algo como esto:

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

Hay una manera de pegar un nbspCharMap abierto y copiar el carácter 160 . Sin embargo, en este caso, probablemente lo espaciaría con relleno, como este:

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

Sin display:inline-blockembargo, es posible que deba configurar las migas de pan o algo así.

Por ejemplo :

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

Ejemplo: si desea seleccionar su personaje, seleccioné "& # 8620" "& # x21ac" (Utilizamos valores HEX )

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

Resultado: ↬

Eso es :)

Sé que esta es una publicación bastante antigua, pero si el espacio es todo lo que buscas, ¿por qué no simplemente:

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

He usado este método antes. Se ajusta perfectamente a otras líneas con ">" a su lado en mis pruebas.

Aquí hay dos formas:

• En HTML:

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

Esto resultará en ⛱

• En CSS:

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

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

Esto también da como resultado ⛱