css - 在 IE 中对 CSS 伪元素使用 "attr()"

Question

我在我的 H4 元素上使用了伪元素 :after，并为它们提供了一个 attr('class') 内容属性:

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

与

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

将产生预期的结果 -- H4 元素的适当标签 类，H4 元素没有任何标签没有 大多数浏览器 Safari 5+ 中的 class 属性。

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

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

Answer 1

就用

h4[class]:after

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