Agregue salto de línea a :: after o :: before pseudo-element content

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 la adición de texto a través de la ::aftero ::beforepseudo-elementos y han encontrado que escape de Unicode debe ser usado para cosas tales como un espacio antes o después del contenido añadido.

¿Cómo agrego varias líneas en la contentpropiedad?

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

#headerAgentInfoDetailsPhone::after
{
 content: 'Office: XXXXX <br /> Mobile: YYYYY ';
}

La contentpropiedad establece:

Los autores pueden incluir nuevas líneas en el contenido generado escribiendo 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/

Sin embargo, cuando se escapan las cadenas arbitrarias, es recomendable usarlo en \00000alugar de hacerlo \A, ya que cualquier número o [a-f]carácter seguido por la nueva línea puede dar resultados impredecibles :

function addTextToStyle(id, text) {
  return `#${id}::after { content: "${text.replace(/"/g, '\\"').replace(/\n/g, '\\00000a')} }"`;
}

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

Todo un montón de cosas increíbles que los pseudo elementos pueden hacer

Si necesita tener dos elementos en línea donde uno se divide en la siguiente línea dentro de otro elemento, puede lograr esto agregando un pseudo-elemento: después con contenido: '\ A' y espacio en blanco: pre

HTML

<h3>
    <span class="label">This is the main label</span>
    <span class="secondary-label">secondary label</span>
</h3>

CSS

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

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 envoltura de palabras parece necesaria.

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

 
 

trabajó. Entonces pude obtener esa información sobre herramientas:

Puedes probar esto

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

Js Fiddle

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

Los caracteres html como 
no funcionarán agregándolos a html usando JavaScript porque esos caracteres se cambian en la representación del documento

En su lugar, necesita encontrar una representación unicode de estos caracteres que son 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;
}

<div text='I want to break it in javascript, after comma sign'></div> 

Espero que esto ahorre tiempo a alguien, buena suerte :)

Agregar salto de línea ::aftero ::beforecontenido de pseudoelementos

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

Encontré esta pregunta aquí que parece preguntar lo mismo: ¿ Secuencia de caracteres de nueva línea en la propiedad 'contenido' de CSS?

Parece que puedes usar \Ao \00000alograrnewline

<p>Break sentence after the comma,<span class="mbr"> </span>in case of mobile version.</p>
<p>Break sentence after the comma,<span class="dbr"> </span>in case of desktop version.</p>

Las clases .mbr y .dbr pueden simular el comportamiento de salto de línea usando CSS display: table . Útil si desea reemplazar real <br />.

Echa un vistazo a esta demostración Codepen: https://codepen.io/Marko36/pen/RBweYY ,
y esta publicación sobre el uso receptivo del sitio: Saltos de línea receptivos : simula <br /> en puntos de interrupción dados .