CSS: Skip underline in part of link

Question

Is it possible to have a contiguous link, where the text is normally underlined on mouse hover, but in the middle have a section (eg an image) without this underline? This does not work:

<a href="#">one <span style="text-decoration:none;">two</span> <img src="img.png" style="border:0px; text-decoration:none;"> three</a>

Answer 1

Make a class that hides underlines, and child class that adds them.

.underline-some {
  text-decoration: none;
}

.underline-some:hover .text {
  text-decoration: underline;
}

<a href="#" class="underline-some">
  <span class="text">Boyz</span> 💈💈
  <span class="text">Men</span>
</a>

This example code above only underlines links on hover. For always-underlined links, remove :hover.

Answer 2

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