Home/ Questions/Q 9057799
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T14:33:09+00:00

I wanted to use CSS3’s :empty psedo-class and CSS3’s content property together to add

  • 0

I wanted to use CSS3’s :empty psedo-class and CSS3’s content property together to add some text to empty lists as demonstrated in this fiddle:

http://jsfiddle.net/ZesAC/2/

I learned that CSS only allows content in :after or :before pseudo-elements. Is there a solution that allows styling of empty lists?

As I learned in the comments, turns out you can use content anywhere in CSS3 (to no effect in the majority of browsers [as of 12/31/2012]) and only in :after and :before blocks in CSS2. (Thanks @BoltClock)

If you don’t mind being Firefox-specific, you can use the -moz-only-whitespace selector to make it behave a little more logically. (Thanks @robertc)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Turns out I answered my own question in the asking:

    http://jsfiddle.net/M6xZj/2/

    You can use :after with the :empty element to add something after the UL. It is empty, after all, so it’s guaranteed to be located where the list was.

    • 0