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

11-02-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.


11-03-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.