Replacing emoticon text with images using CSS

css, javascript

Solution

No, it's not possible in pure CSS.

CSS is for styling. For dynamic changes of content on the page you have to use Javascript. For this smile:

var str = "This is a :) sample text";
str = str.replace(":)", "<span class='emot-smile'>replaced span</span>");

document.write( str );​

Problem

I was wondering if there is a method for replacing text with a span object using purely CSS? For example: ``` This is a :) sample text ``` The :) in above example would be replaced by ``` This is a <span class="emot-smile"></span> sample text ``` or something similar that hides the text itself and adds the span. Is :before and :after selectors something I could use?

Original source