icon - css:: before selector

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

Question

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 <br /> Mobile: YYYYY '';
}

Answer 1

Buen artículo explica algo que quieras

Agregar un salto de línea entre dos elementos en línea

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

<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;
}

Answer 2

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

Answer 3

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/

Answer 4

Puedes intentar esto

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

Js Fiddle

Answer 5

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: