IE: rimuovi la sottolineatura sullo pseudoelemento

Su Chrome e Firefox, se applico una decorazione di testo: sottolineatura su un tag, per impostazione predefinita la sottolineatura non si applica allo pseudo elemento. Ma su IE lo fa, e non riesco a rimuoverlo. Desidero sottolineare il collegamento, ma non lo pseudo elemento. Funziona se aggiungo uno span all'interno e metto la sottolineatura, ma voglio sapere se può essere fatto senza markup addizionale.IE: rimuovi la sottolineatura sullo pseudoelemento

a{ \t \t 
 
\t padding-left: 9px; 
 
\t position:relative; 
 
\t display:inline-block; 
 

 
} 
 
a:before{ 
 
\t content:'\203A\00a0'; 
 
\t position:absolute; 
 
\t top:0; 
 
\t left:0; 
 
\t display: inline-block; 
 
} 
 

 
#underline{ 
 
\t text-decoration: none; \t \t \t 
 
} 
 
#underline:hover{ 
 
\t text-decoration:underline; 
 
} 
 
/* special for IE */ 
 
#underline:hover:before 
 
{ 
 
\t text-decoration:none !important; \t /* does nothing ! */ 
 
} 
 

 
#color{ 
 
\t color:green; 
 
} 
 
#color:hover{ 
 
\t color:red; 
 
} 
 
#color:hover:before{ 
 
\t color:green; \t /* work ! */ 
 
} 
 

 
#span{ 
 
\t text-decoration: none; 
 
} 
 
#span:hover span{ 
 
\t text-decoration: underline; 
 
}

<a href="#" id="underline">underline</a> 
 
<br> 
 
<a href="#" id="color">color</a> 
 
<br> 
 
<a href="#" id="span"><span>with span</span></a>

fonte

2014-11-19 DocFrag

Come text-decoration: underline; non possono essere ignorate da IE si potrebbe usare border-bottom: 1px solid green; invece. Questo può quindi essere sovrascritto su :before impostando il colore del bordo sul colore di sfondo (in questo caso bianco). Questo funziona solo su sfondi a tinta unita però.

a { \t \t 
 
    color: green; 
 
    display: inline-block; 
 
    padding-left: 9px; 
 
    position: relative; 
 
    text-decoration: none; 
 
} 
 
a:before { 
 
    content: '\203A\00a0'; 
 
    display: inline-block; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
} 
 
a:hover { 
 
    border-bottom: 1px solid green; 
 
} 
 
a:hover:before { 
 
    border-bottom: 1px solid white; 
 
}

<a href="#" id="underline">Hover to check underline</a>

fonte

2014-11-20 13:08:15

Sembra che IE non lasciare che si ignora il text-decoration in pseudoelement se non si trova in esso. Prima lascia che lo pseudo-elemento sia sottolineato - la decorazione del testo: sottolinea - e poi lo sostituisce con la decorazione del testo: nessuno.

#underline:hover:before 
 
{ 
 
\t text-decoration:underline; 
 
} 
 

 
#underline:hover:before 
 
{ 
 
\t text-decoration:none; 
 
}

fonte

2015-08-20 13:56:15 Ina

Complimenti a voi. Questa è l'unica soluzione corretta. È necessario modificare la risposta però. È una decorazione testuale: sottolinea (non sottolineata). Grazie mille, questo è stato un mal di testa completo. IE tipico. –

Funziona ma non ha funzionato per me perché quando si ridimensionava il CSS, veniva rimosso il primo stile. La soluzione era aggiungere un'altra classe al tag e quindi impostare la decorazione del testo: nessuna su questo. – Graham

è possibile aggiungere questo alla tua CSS. questo mi ha aiutato in IE

a {text-decoration:none;} 
a:hover {text-decoration:underline;} 
a:before,a:after { text-decoration:underline;} 
a:before,a:after, 
a:hover:before,a:hover:after {text-decoration:none;}

fonte

2016-10-16 11:25:17 bernte

IE: rimuovi la sottolineatura sullo pseudoelemento

risposta

Problemi correlati