Selectively stopping text-decoration: underline on children of a link tag

Question

Does anybody know if it's possible to prevent underlining on the child of an tag, while underlining the rest of the tag's contents?

Here's an example - you can see this working on JSFiddle. I've tried everything I can think of, but the text underlining continues to be applied to all the text inside the link. I'm viewing on Chrome, but I'm sure this applies to all browsers.

a {
    font-size: 32px;           
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a div {
    color: pink;
}

a:hover div,
a:active div,
a:focus div {
    text-decoration: none !important;
}​

<a href="http://news.bbc.co.uk">
<div class="inner">I don't want this bit underlined on hover. What's the big deal?</div>
This bit should be underlined on hover. Underlining here is fine. I have no objections to underlinining in this bit.
</a>​

Answer 1

Read this similar answer and its links for more information: Remove :hover on :after elemets

http://jsfiddle.net/thirtydot/ygXy6/4/

CSS:

a {
    font-size: 32px;           
    text-decoration: none;
}

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

HTML:

<a href="http://news.bbc.co.uk">
    <div class="inner">I don't want this bit underlined on hover. What's the big deal?</div>
    <span>This bit should be underlined on hover. Underlining here is fine. I have no objections to underlinining in this bit.</span>
</a>​