Rimuovi la sottolineatura testarda dal link

Sto tentando di visualizzare un collegamento in bianco, senza sottolineatura. Il colore del testo appare correttamente come bianco, ma la sottolineatura blu è ostinatamente persistente. Ho provato text-decoration: none;e text-decoration: none !important;nel CSS per rimuovere il collegamento sottolineato. Né ha funzionato.

.boxhead .otherPage {
  color: #FFFFFF;
  text-decoration: none;
}

<div class="boxhead">
  <h2>
    <span class="thisPage">Current Page</span>
    <a href="myLink"><span class="otherPage">Different Page</span></a>
  </h2>
</div>

Come posso rimuovere la sottolineatura blu dal link?

Come mi aspettavo, non ti stai applicando text-decoration: none;a un anchor ( .boxhead a) ma a un elemento span ( .boxhead).

Prova questo:

.boxhead a {
    color: #FFFFFF;
    text-decoration: none;
}

Il tag anchor (link) ha anche pseudo-classi come visitato, hover, link e attivo. Assicurati che il tuo stile sia applicato agli stati in questione e che nessun altro stile sia in conflitto.

Per esempio:

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}

Vedi W3.org per ulteriori informazioni sulle pseudo-classi di azioni dell'utente: hover ,: active e: focus.

text-decoration: none !importantdovrebbe rimuoverlo .. Sei sicuro che non ci sia un border-bottom: 1px solidagguato? (Traccia lo stile calcolato in Firebug / F12 in IE)

Aggiungi questo attributo al tuo tag di ancoraggio

style="text-decoration:none;"

Esempio:

<a href="page.html"  style="text-decoration:none;"></a>

Oppure usa il modo CSS.

.classname a {
    color: #FFFFFF;
    text-decoration: none;
}

A volte ciò che vedi è un'ombra a forma di scatola, non una sottolineatura di testo.

Prova questo (usando qualunque selettore CSS adatto a te):

a:hover, a:visited, a:link, a:active {

    text-decoration: none!important;

    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}

Ti sei perso text-decoration:noneper l' etichetta di ancoraggio . Quindi il codice dovrebbe seguire.

.boxhead a {
    text-decoration: none;
}

<div class="boxhead">
    <h2>
        <span class="thisPage">Current Page</span>
        <a href="myLink"><span class="otherPage">Different Page</span></a>
    </h2>
</div>

Proprietà più standard per la decorazione del testo

Senza vedere la pagina, difficile da speculare.

Ma mi sembra che potresti border-bottom: 1px solid blue;essere applicato. Forse aggiungere border: none;.text-decoration: none !importantè giusto, è possibile che tu abbia un altro stile che sta ancora prevalendo su quel CSS.

È qui che utilizzare la barra degli strumenti per sviluppatori Web di Firefox è fantastico, puoi modificare il CSS proprio lì e vedere se le cose funzionano, almeno per Firefox. È sotto CSS > Edit CSS.

Di norma, se la "sottolineatura" non è dello stesso colore del testo [e il "colore:" non è ignorato in linea] non proviene da "decorazione del testo:" Deve essere "bordo inferiore:"

Non dimenticare di togliere il confine anche dalle tue pseudo lezioni!

a, a:link, a:visited, a:active, a:hover {border:0!important;}

Questo snippet assume la sua su un'ancora, cambia di conseguenza il suo wrapper ... e usa la specificità invece di "! Important" dopo aver rintracciato la causa principale.

Mentre le altre risposte sono corrette, c'è un modo semplice per sbarazzarsi della sottolineatura su tutti quei fastidiosi collegamenti:

a {
   text-decoration:none;
}

Questo rimuoverà la sottolineatura da OGNI SINGOLO LINK sulla tua pagina!

Se text-decoration: noneo border: 0non funziona, provate ad applicare stile in linea nel tuo html.

Basta usare la proprietà

border:0;

e sei coperto. Ha funzionato perfettamente per me quando la proprietà della decorazione del testo non funziona affatto.

Nessuna delle risposte ha funzionato per me. Nel mio caso c'era uno standard

a:-webkit-any-link {
text-decoration: underline;

nel mio codice. Praticamente qualunque sia il collegamento, il colore del testo diventa blu e il collegamento rimane qualunque esso sia.

Quindi ho aggiunto il codice alla fine dell'intestazione in questo modo:

<head>
  </style>
    a:-webkit-any-link {
      text-decoration: none;
    }
  </style>
</head>

e il problema non esiste più.

  a {
    color: unset;
    text-decoration: unset;
  }

Ecco un esempio per il controllo LinkButton dei moduli web asp.net:

 <asp:LinkButton ID="lbmmr1" runat="server" ForeColor="Blue" />

Codice dietro:

 lbmmr1.Attributes.Add("style", "text-decoration: none;")

Hai usato nessuna decorazione del testo nel selettore sbagliato. È necessario controllare quale tag è necessario per la decorazione nessuno.

Puoi usare questo codice

.boxhead h2 a{text-decoration: none;}

O

.boxhead a{text-decoration: none !important;}

O

a{text-decoration: none !important;}

Inserisci il seguente codice HTML prima del <BODY>tag:

<STYLE>A {text-decoration: none;} </STYLE>

Nel mio caso, avevo HTML scarsamente formato. Il collegamento era all'interno di un <u>tag e non di un <ul>tag.

Come altri hanno sottolineato, sembra che non puoi ignorare gli stili di decorazione del testo nidificati ... MA puoi cambiare il colore della decorazione del testo.

Come hack, ho cambiato il colore per renderlo trasparente:

text-decoration-color: trasparente;