Question

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?

Answer 1

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 );​