Clever Geek Handbook

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

For example, if the HTML file includes the following:

<span>foo</span>

Is it possible to somehow add "bar" after that in italics with pseudo-elements :after

and :before

in CSS to make it say "foo bar"?

+2


source to share


3 answers 


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


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

+9


source 


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

This won't work in IE, albeit possibly with other user agents, and there is a limitation on what you can actually build since its inception.



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

+4


source


Answer

cletus is correct as you said "In CSS", but you can use jQuery here to match cross browsers.

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


source






More articles:


All Articles