CSS: Rimuovere sottolineato dal testo

Question

Ho il seguente codice HTML

<div style="text-decoration: underline;"> 
    outer text 
    <div style="text-decoration: none;">inner text</div> 
</div> 

Anche se ho usato "nessuno" per "testo interno", è ancora sottolineato. Ecco l'esempio di JS fiddle: http://jsfiddle.net/oj2wj1d6/1/

Come rimuovere la sottolineatura da "testo interno"? Devo mantenere la stessa struttura HTML senza aggiungere nuovi tag HTML.

Answer 1

Tipo di hacky ma utilizzando il selettore ::first-line psueduo, si applica lo stile al 'prima linea' solo così nell'esempio seguente ho usato un elemento (un p) per rompere il testo e innesca l'azione.

Si presume ovviamente che l'unico testo che si desidera sottolineare sia la prima riga del contenuto. emptor di avvertimento, YMMV, ecc

example on JSFiddle.net

html:

<div class="first-line-underline"> 
    outer text a sentence 
    wut 
    yea 
    <p>inner text</p> 
</div> 

css:

.first-line-underline::first-line { 
    text-decoration: underline; 
} 

text-decoration on Mozilla Developer Network ::first-line on Mozilla Developer Network

Answer 2

Questo è in realtà il comportamento definito in the spec:

decorazioni di testo disegnare attraverso elementi discendenti. Ciò significa che non è possibile disabilitare su un discendente una decorazione testuale specificata su uno dei suoi antenati.

Maggiori dettagli a https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration