Использование attr () для псевдоэлементов CSS в IE

Question

Я использую псевдоэлемент :after в моих H4 элементах и ​​даю им attr('class') для свойства content:

<h4 class="category-label">This is a new event</h4>

с

h4:after
{
  content: attr(class);
  display: block;
  padding: 1em;
  background-color: #555;
}

даст ожидаемые результаты - соответствующие метки для H4 элементов с классами и без меток для H4 элементов без class атрибутов в большинство браузеров Safari 5 +.

Однако в IE9 элементы H4 без атрибута class по-прежнему создают псевдоэлементы блока, что приводит к появлению пустых серых полей без текста, что не является ожидаемым поведением. На изображении ниже, только первый блок содержит H4 с атрибутом class, оцененным в «панели»; другие элементы H4 во 2-м и 3-м блоках не имеют атрибутов class:

Есть ли способ гарантировать, что IE9 не отображает псевдоконтент для родительских элементов, у которых нет атрибута ссылочного содержимого? Псевдоэлементы без содержимого не должны отображаться ...

Answer 1

просто используйте

h4[class]:after

, поэтому стиль будет применяться только к элементам с определенным классом

Answer 2

Я сомневаюсь, что вы можете «гарантировать» это, не используя javascript для установки его отображения.Вероятно, это и есть разница между браузерами, когда браузеры, работающие так, как вы ожидаете, игнорируют :after, а IE9 обрабатывает содержимое как пустое, как content: ''