Добавить разрыв строки к содержимому псевдоэлемента :: after или :: before

У меня нет доступа к HTML или PHP для страницы, и я могу редактировать только через CSS. Я вносил изменения на сайт и добавлял текст с помощью псевдоэлементов ::afterили ::beforeи обнаружил, что escape-Unicode следует использовать для таких вещей, как пробел до или после добавленного содержимого.

Как добавить несколько строк в contentсобственность?

В примере элемент строки разрыва HTML предназначен только для визуализации того, чего я хотел бы достичь:

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

В contentсобственности указано:

Авторы могут включать новые строки в сгенерированный контент, записывая escape-последовательность «\ A» в одну из строк после свойства «content». На этот вставленный разрыв строки по- прежнему распространяется свойство "пробел". См. Разделы «Строки» и «Символы и регистр» для получения дополнительной информации о escape-последовательности «\ A».

Итак, вы можете использовать:

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

http://jsfiddle.net/XkNxs/

Однако при экранировании произвольных строк рекомендуется использовать \00000aвместо \A, поскольку любое число или [a-f]символ, за которым следует новая строка, может дать непредсказуемые результаты :

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

Хорошая статья, объясняющая основы (однако, не касается разрывов строк).

Целая куча удивительных вещей, которые могут делать псевдоэлементы

Если вам нужно иметь два встроенных элемента, один из которых переходит в следующую строку в другом элементе, вы можете добиться этого, добавив псевдоэлемент: after с content: '\ A' и 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;
}

Мне нужно было добавить новые строки во всплывающей подсказке. Мне пришлось добавить этот CSS на свой: after:

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

Перенос слов кажется необходимым.

Кроме того, \ A не работал в середине отображаемого текста, чтобы принудительно ввести новую строку.

 
 

работал. Затем я смог получить такую ​​подсказку:

Вы можете попробовать это

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

Js Fiddle

Для людей, которые будут искать «Как динамически изменять содержимое псевдоэлемента, добавляя знак новой строки», вот ответ

Такие символы HTML, как 
не будут работать, добавляя их в HTML с помощью JavaScript, потому что эти символы меняются при рендеринге документа.

Вместо этого вам нужно найти Unicode-представление этих символов, которые являются U + 000D и U + 000A, чтобы мы могли сделать что-то вроде

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> 

Надеюсь, это сэкономит кому-то время, удачи :)

Добавить разрыв строки в контент ::afterили ::beforeпсевдоэлемент

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

Нашел здесь этот вопрос, который, кажется, задает то же самое: Последовательность символов новой строки в свойстве CSS 'content'?

Похоже, вы можете использовать \Aили \00000aдля достиженияnewline

<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 и .dbr классы могут имитировать поведение разрыва строки с помощью CSS дисплея: таблицы . Полезно, если вы хотите заменить настоящий <br />.

Проверьте это демы Codepen: https://codepen.io/Marko36/pen/RBweYY ,
и этот пост ответственного использования сайта: Отзывчивые разрывы строк: симулировать <br /> при заданных контрольных точках .