Dodaj podział wiersza do :: after lub :: before zawartości pseudoelementu

Nie mam dostępu do HTML lub PHP dla strony i mogę edytować tylko przez CSS. Robiłem modyfikacje w witrynie i dodawałem tekst za pomocą pseudoelementów ::afterlub ::beforei odkryłem, że ucieczka Unicode powinna być używana do takich rzeczy, jak spacja przed lub po dodanej treści.

Jak dodać wiele wierszy do contentnieruchomości?

Na przykład element linii przerwania HTML służy tylko do wizualizacji tego, co chciałbym osiągnąć:

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

Te contentstany nieruchomościach:

Autorzy mogą dołączać znaki nowej linii do generowanej treści, pisząc sekwencję ucieczki „\ A” w jednym z ciągów znaków po właściwości „content”. Ten wstawiony podział wiersza nadal podlega właściwości „odstępu”. Aby uzyskać więcej informacji na temat sekwencji ucieczki „\ A”, zobacz „Ciągi znaków” i „Znaki i wielkość liter”.

Możesz więc użyć:

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

http://jsfiddle.net/XkNxs/

Jednak podczas ucieczki przed dowolnymi ciągami zaleca się użycie \00000azamiast \A, ponieważ każda liczba lub [a-f]znak, po którym następuje nowa linia, może dać nieprzewidywalne wyniki :

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

Ładny artykuł wyjaśniający podstawy (nie obejmuje jednak podziałów wierszy).

Pseudoelementy mogą zrobić cały szereg niesamowitych rzeczy

Jeśli potrzebujesz dwóch elementów wbudowanych, z których jeden przechodzi do następnej linii w innym elemencie, możesz to zrobić, dodając pseudoelement: after z zawartością: „\ A” i odstępem: 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;
}

Musiałem mieć nowe linie w podpowiedzi. Musiałem dodać ten CSS do mojego: after:

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

Wydaje się, że zawijanie słów jest konieczne.

Ponadto \ A nie działał w środku tekstu do wyświetlenia, aby wymusić nowy wiersz.

 
 

pracował. Udało mi się wtedy uzyskać taką podpowiedź:

Możesz tego spróbować

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

Js Fiddle

Dla osób, które będą szukały „Jak dynamicznie zmieniać zawartość pseudoelementu dodając nowy znak linii” oto odpowiedź

Znaki HTML, takie jak 
Znaki , nie będą działać podczas dołączania ich do html za pomocą JavaScript, ponieważ te znaki są zmieniane podczas renderowania dokumentu

Zamiast tego musisz znaleźć reprezentację Unicode tych znaków, które są U + 000D i U + 000A, abyśmy mogli zrobić coś takiego

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> 

Mam nadzieję, że zaoszczędzi to komuś czasu, powodzenia :)

Dodaj podział wiersza ::afterlub ::beforezawartość pseudoelementu

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

Znalazłem tutaj to pytanie, które wydaje się zadawać to samo: sekwencja znaków nowego wiersza we właściwości CSS „content”?

Wygląda na to, że możesz użyć \Alub \00000ado osiągnięcianewline

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

.Mbr i .dbr klasy mogą symulować zachowanie końca linii za pomocą CSS display: table . Przydatne, jeśli chcesz zastąpić prawdziwy <br />.

Sprawdź to demo Codepen: https://codepen.io/Marko36/pen/RBweYY ,
i ten post elastycznego wykorzystania stronie: czuły line-przerwy: symulacji <br /> w podanych pułapki .