Можете ли вы добавить разрывы строк в: после псевдоэлемента?

Я хочу добавить <br /> к определенному классу. Использование класса: after pseudo просто отображает <br /> как текст.

Есть ли способ сделать эту работу?

Это внутренне для IE8, поэтому проблемы с браузером не являются проблемой. Если я делаю

<span class="linebreakclass">cats are</span> brilliant

Я хочу, чтобы "блестящий" появлялся на новой строке.

Ответы

Ответ 1

Вы не сможете отображать теги HTML, но вы можете установить стиль следующим образом:

.needs-space:after
{
    content: " ";
    display: block;
    clear: both; /* if you need to break floating elements */
}

Основной параметр здесь display: block; Это отобразит: после содержимого внутри a DIV. И этот псевдоэлемент поддерживается всеми последними браузерами. Включая IE. Говоря об этом, вы должны знать о своих пользователях и их браузерах.

Ответ 2

Вы можете использовать escape-последовательность \A, которая будет отображаться как новая строка:

.new-line:after {
  white-space: pre-wrap;
  content: "\A";
}

Этот метод упоминался в Спецификации CCS 2.1 для свойства content:

Авторы могут включать новые строки в сгенерированном контенте, написав "\A" escape-последовательность в одной из строк после 'content'имущество. Этот вставленный разрыв строки по-прежнему зависит от 'white-space'.

Ответ 3

Ухудшается - класс after после этого даже не работает в IE6 (и, вероятно, некоторые другие браузеры тоже).

Я думаю, что вы действительно хотите здесь, это маржа в нижней части элемента, чтобы обеспечить интервал.

Просто

.myElement {
    margin-bottom: 1em;
}