Question

I’m using the pseudo element :after on my H4 elements, and giving them an attr('class') for the content property:

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

with

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

will yield the expected results — appropriate labels for H4 elements with classes, and no labels whatsoever for H4 elements without class attributes in most browsers Safari 5+.

However in IE9, H4 elements without the class attribute still create block pseudo elements, resulting in blank gray boxes without text, which is not the expected behavior. In the image below, only the first block contains an H4 with a class attribute, valued at “panel;” the other H4 elements in the 2nd and 3rd blocks do not have any class attributes:

Is there a way to ensure that IE9 does not display pseudo content for parent elements that lack referenced content attribute? Pseudo elements w/o content should not render…

Answer 1

just use

h4[class]:after

so the style will be applied only to the elements with a defined class