Разрывы строк в CSS-свойстве content

Development | Amber | Комментировать запись

CSS-свойство content заменяет элемент сгенерированным значением. Объекты, вставленные с помощью свойства content, — анонимные замещаемые элементы.

Свойство content очень полезно для обработки сгенерированного содержимого в элементах ::before или ::after. Чтобы вставить новую строку или разрыв строки в тот или иной контент, используйте escape-символы \A. К примеру:

article h2::before {
  content: "Killing \A Me \A Softly";
  white-space: pre-wrap;
}

Свойство white-space

CSS-свойство white-space определяет, как внутри элемента обрабатываются пробелы. Чтобы новые строки, добавленные с помощью свойства content, работали правильно, вам также необходимо установить для свойства white-space значение pre или pre-wrap.

Читайте также: Как работает CSS-селектор псевдокласса :checked