Interruzione selettiva della decorazione del testo: sottolineatura sui figli di un tag di collegamento

Question

Qualcuno sa se è possibile impedire la sottolineatura sul figlio di un tag, sottolineando il resto del contenuto del tag?

Ecco un esempio: è possibile vederlo funzionante su JSFiddle. Ho provato tutto ciò che riesco a pensare, ma la sottolineatura del testo continua ad essere applicata a tutto il testo all'interno del link. Sto visualizzando su Chrome, ma sono sicuro che questo si applica a tutti i browser.

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

leggere questa risposta simile ed i suoi link per ulteriori informazioni: 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>​