Agregar entidades HTML usando contenido CSS

1013

¿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: ' ';
}
nickf
fuente
55
En un sentido diferente, agregar contenido usando CSS viola la separación de preocupaciones, CSS está destinado solo a definiciones de estilo. Es preferible evitar desde un punto de vista de accesibilidad, ya que deshabilitar CSS arruina toda la marca. Sin embargo, es bueno agregar imágenes usando esta técnica.
questzen
95
Depende. En este caso es para fines de presentación. Sería "violar" SoC poner ">" en el html
mathieu
2
Solo una pregunta, ¿crees que sería mejor como una lista ordenada? Quiero decir, es una lista con un pedido, ¿no?
alex
3
@questzen: creo que es perfectamente aceptable (y buena forma) usar CSS :afterpara establecer, por ejemplo, el indicador de clasificación asc / desc en una columna ordenada.
Josh M.
99
Noté que la gente se ha vuelto loca por el principio de SoC. Cielos, ¿qué tipo de contenido es un signo ">" para ti ?! ¡Tener compasión! es solo un icono en este contexto, un widget, una viñeta, lo que sea. Para mí, el contenido es algo que me gustaría que se pueda buscar.
user776686

Respuestas:

1063

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/

Mathieu
fuente
57
Los ceros iniciales son superfluos, consulte CSS 2.1: cadenas 4.3.7 . '>\a0'es suficiente
PointedEars
18
@dlamblin Además, para evitar que los caracteres sean interpretados como parte de la secuencia de escape de manera confiable , agregue espacio en blanco estándar: '>\a0 bc'se muestra > bc.
PointedEars
18
Mi herramienta amp-what.com/#q=%3E proporciona un modo "CSS". Elija "css" en la parte inferior de la página. Según la referencia CSS anterior, estos deben estar delimitados por espacios cuando son ambiguos.
ndp
@mathieu ¿Puedes usar 'contenido' para agregar una imagen en su lugar? Solo me pregunto
weia design
1
@ Adam, no, si quieres agregar una imagen, usa "background-image" y muestra: inline-block; y ancho: 123px; altura: 123 px; (use el ancho / alto exacto)
Nathan JB
177

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 1 + 0 × 16 0 ). 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.

Orejas puntiagudas
fuente
+1 para el truco "para mostrar un espacio después de un personaje escapado", pero tengo que mencionar que agregar un nbsp y luego un espacio de
alguna manera anula
@TWiStErRob No, una combinación de un carácter de espacio sin salto seguido de un carácter de espacio de corte (o viceversa) mostrará un espacio sobre el ancho de dos caracteres de espacio, mientras que dos o más caracteres de espacio literal solo mostrarán un espacio de el ancho de un carácter de espacio cuando el analizador del motor de diseño contrae los espacios en blanco de ruptura consecutivos (incluida la nueva línea) en un carácter de espacio a menos que la white-spacepropiedad CSS declare lo contrario.
PointedEars
sí, sé sobre el colapso, pero el punto de nbsp es que no se rompe, los caracteres de las palabras también no se rompen por defecto, por lo que no tiene sentido agregar un espacio de corte junto a uno que no se rompe, el resultado final será rotura. Estoy hablando de white-space: normal.
TWiStErRob
@TWiStErRob Por favor, lea mi respuesta con más cuidado. Es un ejemplo para "mostrar [ing] un espacio después de un carácter escapado". El código original tenía un NO-BREAK SPACEcarácter, así que usé la secuencia de escape para ello. Puede elegir cualquier otra secuencia de escape; Si es necesario, también puede declarar white-space: nowrap.
PointedEars
81

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.

dlamblin
fuente
66
Sólo tiene que poner un espacio después de la secuencia de escape, tal como se especifica: '\a0 Break'. No'\0000a0Break' es confiable.
PointedEars
@PointedEars Interesante, ¿entonces este espacio es un terminador y no se incluye en la cadena?
dlamblin
2
Ver CSS 2.1, sección "4.1.3 Caracteres y mayúsculas y minúsculas" . Lo que también muestra que su enfoque DEBE ser confiable según CSS 2.1. Pero encuentro que el enfoque de espacios en blanco es más limpio (compatible con versiones superiores) y tiene una huella más pequeña.
PointedEars
47

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.

netgoblin
fuente
44
Si bien es totalmente útil, en realidad no responde la pregunta, por lo que sería mejor como comentario a la pregunta.
dlamblin
1
Flecha pequeña negra que apunta hacia la derecha (▸ \25B8 ▸ ▸) hacia adelante. Además, vea en.wikipedia.org/wiki/Geometric_Shapes para más información.
Joel Purra
2 Joo Purra, lee Wiki en más tiempo. confundiste los símbolos.
netgoblin
@netgoblin: ¿cómo es eso? Simplemente me gusta la pequeña flecha negra que apunta a la derecha.
Joel Purra
1
Uso este graphemica.com donde puedes obtener Decimal, Hexadecimal, etc.
Mike
34

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

.breadcrumbs a:before {
    content: '>\00a0';
}
John Millikin
fuente
17

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í.

Atrevimiento
fuente
44
En lugar de pegar el nbsp, me apegaría a usar una entidad, para que los futuros mantenedores tengan claro que es diferente a un espacio.
nickf
2
por otro lado, no debe hacer migas de pan como se supone que deben ser, es decir: el símbolo> debe estar en línea con la ruta de navegación y no solo un estilo visual. al menos si desea que Google vea sus migas de pan y las enumere en su listado en el motor de búsqueda.
Demencial
10

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 :)

Ferhat KOÇER
fuente
utilicé el contenido: '\ 10095'; . Pero el resultado no se muestra. en lugar del icono, muestra un rectángulo.
kapil
0

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.

Brian Welch
fuente
-2

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 ⛱

Tarandeep Singh
fuente
La respuesta correcta es .ics :: before {content: '\ 9969';}
Marco Scarnatto