In CSS, can I add text of a different style before or after other text?

Question

For example, if the following is part of an HTML file:

<span>foo</span>

can I somehow add " bar" after it in italics with the .after and .before pseudo-selectors in CSS so that it would say "foo bar"?

Answer 1

span:after {
  content: "bar";
  font-style: italic;
}

It is however CSS3 and not widely supported (yet). See 4.2. Inserting content into an element: the '::before' and '::after' pseudo-elements.

Answer 2

span:after {
    content:' bar';
    font-style:italic;
}

This won't work in IE though and possibly other user-agents, and there's a limit to what you can actually style since its generated.

Reference: http://www.w3.org/TR/CSS2/selector.html#before-and-after

Answer 3

cletus' answer is correct since you said "In CSS", but you can use jQuery here for cross-browser compliance.

$('span').append('bar');