CSS Button using 'content' property Question

I am trying to get some opinions on the technique i am using below.

I have created several hyperlink button style classes in CSS that utilize the :after and before pseudo selectors and attach some content and a background-image.

a.edit:after { content:'edit'; background:url(../icons/pencil.png) no-repeat center left; }
a.change:after { content:'change'; background:url(../icons/wrench.png) no-repeat center left; }
a.delete:after { content:'delete'; background:url(../icons/cross.png) no-repeat center left; }

I find this useful because I can toggle/remove/add a class using jquery and it will automatically update the text and the button image.

I have briefly tested them in the modern browsers and they seem to work as intended as long as the 'content' property isn't empty.

Please let me hear some opinions.

Bo

Does not degrade gracefully. I also doubt that screen-readers would read out the CSS content. If you're using JQuery, I don't see how this is really any different from physically changing HTML content.