Agregue salto de línea a :: after o :: before contenido de pseudo-elemento

No tengo acceso al HTML o PHP para una página y solo puedo editar a través de CSS. He estado haciendo modificaciones en un sitio y agregando texto mediante los pseudo-elementos ::after o ::before y he descubierto que el escape Unicode debe usarse para cosas como un espacio antes o después del contenido agregado.

¿Cómo agrego varias líneas en la propiedad de content ?

En el ejemplo, el elemento HTML línea de línea es solo para visualizar lo que me gustaría lograr:

 #headerAgentInfoDetailsPhone::after { content: 'Office: XXXXX 
Mobile: YYYYY '; }

La propiedad de content dice:

Los autores pueden incluir nuevas líneas en el contenido generado al escribir la secuencia de escape “\ A” en una de las cadenas después de la propiedad ‘contenido’. Este salto de línea insertado todavía está sujeto a la propiedad ‘espacio en blanco’. Consulte “Cadenas” y “Caracteres y mayúsculas y minúsculas” para obtener más información sobre la secuencia de escape “\ A”.

Entonces puedes usar:

 #headerAgentInfoDetailsPhone:after { content:"Office: XXXXX \A Mobile: YYYYY "; white-space: pre; /* or pre-wrap */ } 

http://jsfiddle.net/XkNxs/

Buen artículo que explica los conceptos básicos (sin embargo, no cubre los saltos de línea).

Todo un montón de cosas asombrosas que Pseudo Elements puede hacer

Si necesita tener dos elementos en línea donde uno se rompe en la siguiente línea dentro de otro elemento, puede lograr esto agregando un pseudo-elemento: after con contenido: ‘\ A’ y espacio en blanco: pre

HTML

 

This is the main label secondary label

CSS

 .label:after { content: '\A'; white-space: pre; } 

Puedes intentar esto

 #headerAgentInfoDetailsPhone { white-space:pre } #headerAgentInfoDetailsPhone:after { content:"Office: XXXXX \A Mobile: YYYYY "; } 

Js Fiddle

Tenía que tener nuevas líneas en una información sobre herramientas. Tuve que agregar este CSS en mi: después:

 .tooltip:after { width: 500px; white-space: pre; word-wrap: break-word; } 

La redacción de palabras parece necesaria.

Además, el \ A no funcionó en el medio del texto para mostrar, para forzar una nueva línea.

  
 

trabajó. Entonces pude obtener una información sobre herramientas de este tipo:

enter image description here

Para las personas que van a buscar ‘Cómo cambiar dinámicamente el contenido en el pseudo elemento agregando un nuevo signo de línea’, aquí está la respuesta

Caracteres Html como no funcionará anexándolos a html usando JavaScript porque esos caracteres se cambian en el procesamiento de documentos

En su lugar, necesita encontrar una representación unicode de estos caracteres que sean U + 000D y U + 000A para que podamos hacer algo como

 var el = document.querySelector('div'); var string = el.getAttribute('text').replace(/, /, '\u000D\u000A'); el.setAttribute('text', string); 
 div:before{ content: attr(text); white-space: pre; } 
 

Encontré aquí esta pregunta que parece preguntar lo mismo: secuencia de caracteres Newline en la propiedad ‘contenido’ de CSS?

Parece que puedes usar \A o \00000a para lograr una newline

 

Break sentence after the comma, in case of mobile version.

Break sentence after the comma, in case of desktop version.

Las clases .mbr y .dbr pueden simular el comportamiento de salto de línea utilizando CSS display: table . Útil si quieres reemplazar real
.

Echa un vistazo a esta demo Codepen: https://codepen.io/Marko36/pen/RBweYY ,
y esta publicación sobre el uso responsable del sitio: Saltos de línea responsivos: simular
en determinados puntos de corte .

Agregue salto de línea a :: after o :: before contenido de pseudo-elemento

 .yourclass:brfore{ content: 'text here first \A text here second'; white-space: pre; }