Aggiungi un'interruzione di riga al contenuto pseudo-elemento :: after o :: before

Non ho accesso all'HTML o al PHP per una pagina e posso modificarlo solo tramite CSS. Ho fatto modifiche su un sito e l'aggiunta di testo tramite la ::aftero ::beforepseudo-elementi e hanno trovato che la fuga Unicode dovrebbe essere usato per cose come uno spazio prima o dopo il contenuto aggiunto.

Come faccio ad aggiungere più righe nella contentproprietà?

Ad esempio, l'elemento della linea di interruzione HTML è solo per visualizzare ciò che vorrei ottenere:

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

La contentproprietà afferma:

Gli autori possono includere newline nel contenuto generato scrivendo la sequenza di escape "\ A" in una delle stringhe dopo la proprietà 'content'. Questa interruzione di riga inserita è ancora soggetta alla proprietà 'white-space'. Vedere "Stringhe" e "Caratteri e maiuscole" per ulteriori informazioni sulla sequenza di escape "\ A".

Quindi puoi usare:

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

http://jsfiddle.net/XkNxs/

Quando si scappa da stringhe arbitrarie, tuttavia, è consigliabile utilizzare \00000ainvece di \A, poiché qualsiasi numero o [a-f]carattere seguito dalla nuova riga può dare risultati imprevedibili :

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

Bell'articolo che spiega le basi (tuttavia non copre le interruzioni di riga).

Un intero mazzo di incredibili oggetti pseudo può fare

Se hai bisogno di avere due elementi inline in cui uno si rompe nella riga successiva all'interno di un altro elemento, puoi farlo aggiungendo uno pseudo-elemento: after con 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;
}

Ho dovuto avere nuove linee in una descrizione comandi. Ho dovuto aggiungere questo CSS sul mio: dopo:

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

L'involucro delle parole sembra necessario.

Inoltre, \ A non funzionava nel mezzo del testo da visualizzare, per forzare una nuova riga.

 
 

lavorato. Sono stato quindi in grado di ottenere una descrizione del genere:

Puoi provare questo

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

Js Fiddle

Per le persone che cercheranno "Come modificare dinamicamente il contenuto sullo pseudo elemento aggiungendo un nuovo segno di linea" ecco la risposta

I caratteri html come 
non funzioneranno aggiungendoli a html usando JavaScript perché quei caratteri vengono cambiati nel rendering del documento

Invece devi trovare una rappresentazione unicode di questi personaggi che sono U + 000D e U + 000A in modo da poter fare qualcosa di simile

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> 

Spero che questo risparmi tempo a qualcuno, buona fortuna :)

Aggiungi interruzione di riga al contenuto ::aftero ::beforepseudo-elemento

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

Hai trovato questa domanda qui che sembra porre la stessa cosa: sequenza di caratteri Newline nella proprietà 'content' del CSS?

Sembra che tu possa usare \Ao \00000aper ottenere unnewline

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

Le classi .mbr e .dbr possono simulare il comportamento di interruzione di riga usando CSS display: table . Utile se si desidera sostituire reale <br />.

Dai un'occhiata a questo demo Codepen: https://codepen.io/Marko36/pen/RBweYY ,
e questo post sull'uso del sito reattivo: Responsive line-break: simulare <br /> in determinati punti di interruzione .