Перенос строки в псевдоэлементах

breakPseudoLine.md

Писать текст с новой строки в разметке можно благодаря тегу <br>. Сделать то же самое в тексте псевдоэлемента поможет следующее.

Для начала, нужно добавить псевдоэлементам объявление white-space: pre;, чтобы текст выводился с учётом символов переноса.

Если текст псевдоэлемента задаётся в его стилях при помощи объявления content: "Текст псевдоэлемента", нужно использовать \A:

<p class="test"></p>

.test:after {
    content: "Текст\Aмногострочный";
}

Если текст псевдоэлемента берётся из атрибута элемента, например, при помощи объявления content: attr(data-text), в тексте следует использовать символ переноса 
:

<p class="test" data-text="Текст&#10;многострочный"></p>

.test:after {
    content: attr(data-text);
}

Пример