使用＆＃34; attr（）＆＃34; IE中的CSS伪元素

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元素没有标签没有 {{ 大多数浏览器中的1}}属性 Safari 5 +。

但是在IE9中，没有class属性的H4元素仍然会创建块伪元素，导致没有文本的空白灰色框，这不是预期的行为。在下图中，只有第一个块包含class H4属性，其值为“panel;”第二个和第三个块中的其他class元素没有任何H4属性：

有没有办法确保IE9不显示缺少引用内容属性的父元素的伪内容？没有内容的伪元素不应该呈现......

Answer 1

只需使用

h4[class]:after

因此样式将仅应用于具有已定义类

的元素

Answer 2

我怀疑你可以“确保”它而不使用javascript来设置它的显示。可能发生的是浏览器差异，浏览器按预期运行时忽略:after而IE9将内容视为空content: ''