Question

I want to make all text links at my website have a bottom border. I use:

a
{
    border-bottom: 1px dotted #333;
}

… but it adds a border to image links too and I don’t want that.

How do I make it work for text links only?

Answer 1

a { border-bottom:1px dotted #333; }
a img { border:0; }

Just override the inherited rule, the native css way.

Edit: Wow, I’m really not paying attention. Can you just throw a class to anchors that include images?

a.contains-image { border:0; }

This would be the only non-scripting solution without relying on CSS3’s not selector.