How to select text, but not images, in CSS

Question

Simple question: I have the following markup...

<a href='#'>
  <img src='icon.png'> This is the link
</a>

I want to have the text become underlined on mouseover.

What is the CSS selector for selecting only the text in that <a> element and nothing else? I'd rather not wrap it in anything if I don't have to.

a:hover {
  text-decoration: none;
}
a:hover <select_text_here> {
  text-decoration: underline;
}

Answer 1

I see that Opera/IE doesn't underline the image, but FF does. The easiest way to fix it is to add span element:

<a href="..."><img ... /> <span>...</span></a>

And then apply text-decoration to span element:

a:hover span {
  text-decoration: underline;
}

As far as I know you're not able to select the text only.

Answer 2

The text would have to be in its own element in order for it to be selectable in CSS. You'd have to use a span or similar:

<a href="#"><img src="" /><span class="link-text">Foo</span></a>

Obviously you can then just use .link-text to select it.

Answer 3

Since the text doesn't have any separate "handle" that you could select, the best you can do is underline the whole a tag, which includes the image. The image itself will not be underlined technically, so you can't even "un-underline" it.

You'll either have to separate the image from the text, or wrap the text in a span and only highlight that.

Answer 4

Perhaps try this :

a:hover {
  text-decoration: underline;
}
a:hover IMG {
  text-decoration: none;
}

Answer 5

a:hover {
  text-decoration: underline;
}
a:hover img {
  text-decoration: none;
}

another thing you could do is

a{
    background: url(icon.png); background-repeat: no-repeat; padding-left: 10px
}

or similar, so you don't have to have the image element in the link

Answer 6

a:hover {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

a img{
   text-decoration: none;
}

should do it. This way all the img tags inside a will be without any underline.