View Full Version : CSS Button using 'content' property Question

Nov 2nd, 2010, 04:00 PM
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.


Nov 3rd, 2010, 12:04 AM
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.