Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Thanked 0 Times in 0 Posts

    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.


  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Thanked 265 Times in 263 Posts
    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.


    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts