Does adding 'content:' property to non-pseudo-elements have any adverse effects?

HTML & CSS
1

I have some code where I’m using pseudo-elements to hold some background icons:

.icon:before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background: url(star.png);
}

I also have some code where I’m not using pseudo-elements, but simply adding the icon directly within a tag:

span {
  display: block;
  width: 16px;
  height: 16px;
  background: url(star.png);
}

The only difference between the two code blocks is the pseudo-element needs an empty “content” property, while the non-pseudo doesn’t.

So, for the sake of not having to repeat myself throughout the code, would it be ok to just do the following:

.icon:before, span {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background: url(star.png);
}

and not worry about the ‘span’ applying (or not applying) the ‘content’ property, because it’s only specific to pseudo-elements?

I know I can just isolate the ‘.icon:before’ and apply the content property there, but I’m creating alot of this code in a SASS loop and don’t want to get too far into the weeds spending time trying to separate them if it’s not necessary to do so.

Thanks.

2

Hi,

Applying the content property to elements that don’t accept it will do no harm and will just be ignored for that rule.

There could be an issue however when you do this:


.icon:before, span {styles etc,}

If a browser doesn’t understand :before then it is required to drop out of the rule immediately which means that any comma separated rules will not be parsed. For that reason you should never chain normal rules with pseudo content rules or at least be aware of browser support for those rules or you may end up losing all the rules in the comma separated list.

However having said all that the only browsers that don’t understand the :before rule are IE7 and under and they also don’t understand that they should drop out of the comma separated list so you are safe :slight_smile: The same is not true though for IE8 and if you used an advanced css selector such as :target in your comma separated list then IE8 will ignore all of the comma separated list (and so would any other browser that didn’t understand that rule (apart from IE7 and under)).

3

Thanks very much Paul O’B.