Adicione quebra de linha ao conteúdo do pseudo-elemento :: after ou :: before

Não tenho acesso ao HTML ou PHP de uma página e só posso editar via CSS. Venho fazendo modificações em um site e adicionando texto via pseudoelementos ::afterou ::beforee descobri que o Unicode de escape deve ser usado para coisas como um espaço antes ou depois do conteúdo adicionado.

Como adiciono várias linhas na contentpropriedade?

No exemplo, o elemento de linha de quebra de HTML é apenas para visualizar o que eu gostaria de alcançar:

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

A contentpropriedade declara:

Os autores podem incluir novas linhas no conteúdo gerado, escrevendo a sequência de escape "\ A" em uma das seqüências após a propriedade 'content'. Essa quebra de linha inserida ainda está sujeita à propriedade 'espaço em branco'. Consulte "Strings" e "Caracteres e maiúsculas" para obter mais informações sobre a sequência de escape "\ A".

Então você pode usar:

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

http://jsfiddle.net/XkNxs/

Ao escapar de seqüências arbitrárias, no entanto, é aconselhável usar em \00000avez de \A, porque qualquer número ou [a-f]caractere seguido pela nova linha pode fornecer resultados imprevisíveis :

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

Bom artigo explicando o básico (no entanto, não abrange quebras de linha).

Um monte de coisas surpreendentes que os pseudo-elementos podem fazer

Se você precisar ter dois elementos em linha onde um quebra na próxima linha dentro de outro elemento, poderá fazer isso adicionando um pseudo-elemento: after with content: '\ A' e white-space: 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;
}

Eu precisava ter novas linhas em uma dica de ferramenta. Eu tive que adicionar esse CSS no meu: after:

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

A quebra de linha parece necessária.

Além disso, o \ A não funcionava no meio do texto para exibir, para forçar uma nova linha.

 
 

trabalhou. Pude então obter uma dica de ferramenta:

Você pode tentar isso

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

Js Fiddle

Para as pessoas que procurarão 'Como alterar conteúdo dinamicamente no pseudo-elemento adicionando um novo sinal de linha "aqui está a resposta


Caracteres HTML como não funcionarão anexando-os ao HTML usando JavaScript porque esses caracteres são alterados na renderização do documento

Em vez disso, você precisa encontrar uma representação unicode desses caracteres que são U + 000D e U + 000A, para que possamos fazer 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 isso poupe tempo de alguém, boa sorte :)

Adicionar quebra de linha ::afterou ::beforeconteúdo de pseudo-elemento

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

Encontrei esta pergunta aqui que parece perguntar a mesma coisa: Nova seqüência de caracteres na propriedade CSS 'content'?

Parece que você pode usar \Aou \00000aobter umnewline

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

O .mbr e .dbr classes podem simular o comportamento de quebra de linha usando CSS display: table . Útil se você deseja substituir o real <br />.

Confira esta demonstração Codepen: https://codepen.io/Marko36/pen/RBweYY ,
e esta publicação sobre site responsivo usa: Quebras de linha responsivas: simule <br /> em determinados pontos de interrupção .