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

Question

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

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

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

Просто

.myElement { 
    margin-bottom: 1em; 
} 

Answer 3

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

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

Этот метод был упомянут в CCS 2.1 Specification для content собственности:

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