Perché appare la sottolineatura del collegamento dopo aver fatto clic sul collegamento?

Question

Ho un tag di ancoraggio in stile text-decoration: none.

Questo ha rimosso la sottolineatura dai miei collegamenti, che è quello che voglio.

Tuttavia, dopo aver fatto clic sul collegamento, piccoli bit della sottolineatura del collegamento vengono visualizzati sotto gli spazi tra le icone nel collegamento.

ho avere qualcosa di simile

<a ng-click="toggle(this)" style="text-decoration: none"> 
    <i class="fa fa-caret-down" ng-if="!collapsed"></i> 
    <i class="fa fa-folder-open-o" ng-if="!collapsed"></i> 
    <i class="fa fa-caret-right" ng-if="collapsed"></i> 
    <i class="fa fa-folder-o" ng-if="collapsed"></i> 
</a> 

(utilizzando il font icone impressionante)

La sottolineatura viene visualizzato appena sotto lo spazio vuoto tra le icone.

C'è un modo per sbarazzarsi di questo collegamento sottolineato per una volta e per sempre ?!

Answer 1

Questo è perché i valori CSS predefiniti per i collegamenti sono dichiarati dai vari browser. Un link ha 4 stati ufficiali.

• Normale
• Hover
• attivo (On ​​mouseclick)
• Visitato
• (Focus)

In CSS è possibile dichiarare lo stile per ognuno di essi. Se si desidera che il link non per visualizzare il text-decoration in questi stati:

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

risposta al tuo commento

Sì, è possibile sostituire l'uno con un nome di classe. Ad esempio, hai un collegamento con la classe "myLink".

È possibile effettuare il CSS:

.myLink, .myLink:hover, .myLink:active, .myLink:visited, .myLink:focus { 
    text-decoration:none; 
} 

Answer 2

Si sta utilizzando la proprietà errata ... text-decoration-line non è stato progettato per questo.

La proprietà text-decoration-line specifica il tipo di linea, se del caso, la decorazione avrà

Usa text-decoration: none invece

Answer 3

<style> 
    a{text-decoration:none} 
    a:visited{text-decoration:none} 
</style> 

Aggiungere un foglio di stile per il vostro progetto

Answer 4

Il modo giusto e si dovrebbe coprire questo aggiungendo il seguente css nel tuo porcile Le definizione della scheda:

**Longer CSS Styling definition:** 

a:link { 
    text-decoration: none; 
} 

a:visited { 
    text-decoration: none; 
} 

a:hover { 
    text-decoration: none; 
} 

a:active { 
    text-decoration: none; 
} 

**Shorter CSS definition:** 

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

questo farà sì no sottolineando in tutto lo stato dei collegamenti per essere assolutamente sicuro che non ci saranno sottolineando in uno qualsiasi dei link sulla pagina. Puoi anche condensare la definizione di stile nel tuo css in modo che il codice non sia lungo ed è più efficiente controllare lo stile per tutti i comportamenti di collegamento perché si applica a tutti i link sulla pagina quando stai definendo a

se si desidera per lo stile che per i collegamenti specifici avresti effettuare le seguenti operazioni:

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

<a href="/" class="nav">styled links</a>. 

o qualcosa di completamente diverso l'aggiunta di colori, overline, spessore del carattere, la dimensione, che stanno per essere diverso in ogni stato di collegamento per quella classe specifica.

a.external:link {color: #0000ff; font-size: 18pt; font-weight: bold; } 
a.external:visited {color: #894f7b; font-weight: bold; } 
a.external:hover {text-decoration: overline; background-color: #003399; } 
a.external:active {color: red; }