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

Question

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

Есть ли способ заставить это работать?

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

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

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

Answer 1

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

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

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

Answer 2

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

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

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

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

Answer 3

Становится еще хуже - класс : after даже не работает в IE6 (и, вероятно, в некоторых других браузерах тоже).

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

Просто

.myElement {
    margin-bottom: 1em;
}