with css3, is is possible to have left/right padding in a span iff not empty

Question

have span that may or may not have text content.

is there a way to have left and right padding if and only if there is text content?

was thinking of using pseudo classes :first and :last, seeing how some css3 examples make the first character extra large for example.

will this work or is it a pipe dream?

Answer 1

There is an :empty pseudo-selector that will do what you need.

span {
  padding:0 20px;
}

span:empty {
  padding:0;
}

More here - http://www.w3.org/TR/css3-selectors/#empty-pseudo