Come rimuovere solo la sottolineatura da a: prima?

95

Ho una serie di collegamenti in stile che utilizzano :beforeper applicare una freccia.

Sembra buono in tutti i browser, ma quando applico la sottolineatura al collegamento, non voglio avere la sottolineatura sulla :beforeparte (la freccia).

Vedi jsfiddle per esempio: http://jsfiddle.net/r42e5/1/

È possibile rimuoverlo? Lo stile di test con cui mi sono seduto #test p a:hover:beforeviene applicato (secondo Firebug), ma la sottolineatura è ancora lì.

Qualche modo per evitarlo?

#test {
  color: #B2B2B2;
}

#test p a {
  color: #B2B2B2;
  text-decoration: none;
}

#test p a:hover {
  text-decoration: underline;
}

#test p a:before {
  color: #B2B2B2;
  content: "► ";
  text-decoration: none;
}

#test p a:hover:before {
  text-decoration: none;
}

<div id="test">
  <p><a href="#">A link</a></p>
  <p><a href="#">Another link</a></p>
</div>

Espandi lo snippet

— OptimusCrime
fonte

Beh, ovviamente vuoi una lista ... Usa un elemento UL invece della combinazione DIV / P. Con le liste ottieni i proiettili (o dischi, ...) gratuitamente ...

— Šime Vidas

Perché non utilizzare l'elenco con punti elenco personalizzati invece di paragrafi nel tuo caso? Altrimenti applica il contenuto precedente al genitore p, non al collegamento stesso.

— YuS

Possibile duplicato di stackoverflow.com/questions/8536015/…

— Oriol

171

È possibile rimuoverlo?

Sì, se modifichi lo stile di visualizzazione dell'elemento inline da display:inline(predefinito) a display:inline-block:

#test p a:before {
    color: #B2B2B2;
    content: "► ";
    display:inline-block;
}

Questo perché le specifiche CSS dicono :

Quando specificato o propagato a un elemento in linea, influisce su tutte le caselle generate da quell'elemento e viene ulteriormente propagato a tutte le caselle a livello di blocco in flusso che suddividono l'inline (vedere la sezione 9.2.1.1). […] Per tutti gli altri elementi viene propagato a tutti i figli in flusso. Si noti che le decorazioni di testo non vengono propagate ai discendenti mobili e posizionati in modo assoluto, né ai contenuti dei discendenti atomici a livello di riga come i blocchi inline e le tabelle inline .

(Enfasi mia.)

Demo: http://jsfiddle.net/r42e5/10/

_{Grazie a @Oriol per aver fornito la soluzione alternativa che mi ha spinto a controllare le specifiche e vedere che la soluzione alternativa è legale.}

— Phrogz
fonte

2

Puoi sostituire un'applicazione text-decoration:underlineapplicata a un elemento genitore con display:inline-block. Guarda un esempio: jsfiddle.net/aZdhN/1 . Quindi, il problema di asker può essere risolto in questo modo: stackoverflow.com/a/17347068/1529630

— Oriol

3

Per quanto posso vedere, questo non funziona in Internet Explorer (testato 8-10). Qualche idea su come affrontare IE?

— Linus Caldwell

Ho trovato una soluzione che sta lavorando in IE8-11 troppo: stackoverflow.com/a/21902566/1607968

— LeJared

53

C'è un bug in IE8-11 , quindi usare display:inline-block;da solo non funzionerà lì.

Ho trovato una soluzione a questo bug, impostando esplicitamente text-decoration:underline;il contenuto: before e poi sovrascrivendo di nuovo questa regola context-decoration:none;

a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
a:before,
a:hover:before {text-decoration:none;}

Esempio di lavoro qui: http://jsfiddle.net/95C2M/

Aggiornamento: poiché jsfiddle non funziona più con IE8, incolla questo semplice codice demo in un file html locale e aprilo in IE8:

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <style type="text/css">
        a {text-decoration:none;}
        a:hover {text-decoration:underline;}
        a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
        a:before,
        a:hover:before {text-decoration:none;}
    </style>
</head>
<body>
    <a href="#">Testlink</a> With no Underline on hover under before-content
</body>
</html>

— LeJared
fonte

Se un caso fosse IE8, la sottolineatura di un'immagine con collegamento ipertestuale poteva essere disattivata solo <img style="text-decoration:underline">dall'interno (ed ecco la chiave)<a style="padding:0; border:none;">

— Bob Stein

Sfortunatamente quel jsfiddle non può essere verificato in IE8 perché jsfiddle non funziona in IE8.

— user2867288

Sfortunatamente non sono riuscito a trovare alcuno strumento di condivisione del codice online che funzioni ancora con IE8. Ho aggiunto un codice ritagliato alla risposta sopra che puoi semplicemente incollare in un file html e aprirlo localmente in IE8.

— LeJared

Testato e approvato su IE9, evento senza due stati diversi.

— saeraphin

Aveva un collegamento con un'icona in: prima non doveva essere sottolineato nello stato di riposo, quindi essere sottolineato al passaggio del mouse, ma non l'icona. Ecco cosa ho dovuto fare per convincere IE a farlo bene: a {text-decoration: none} a: before {text-decoration: underline} a: before {text-decoration: none} (sì davvero, prima sottolineatura, quindi sovrascrivi con nessuno) a: hover {text-decration: underline} a: hover: before {text-decoration: none}

— Fake Haak

7

Puoi farlo aggiungendo quanto segue :beforeall'elemento:

display: inline-block;
white-space: pre-wrap;

Con display: inline-blockla sottolineatura scompare. Ma poi il problema è che lo spazio dopo il triangolo collassa e non viene mostrato. Per risolverlo, puoi usare white-space: pre-wrapo white-space: pre.

Demo : http://jsfiddle.net/r42e5/9/

— Oriol
fonte

1

+1 per il pre-wrapsuggerimento. Stavo usando content:'►\a0'(\ a0 = & nbsp;)

— Hashbrown

1

Avvolgi i tuoi collegamenti in intervalli e aggiungi la decorazione del testo allo span su a: hover in questo modo,

a:hover span {
   text-decoration:underline;
}

Ho aggiornato il tuo violino a quello che penso tu stia cercando di fare. http://jsfiddle.net/r42e5/4/

— Mammelle
fonte

Buona idea. Ecco come l'ho fatto prima. Il problema è che questo collegamento è prodotto in un sistema cms e i nostri clienti lo compilano come testo RTF.

— OptimusCrime

che lingua è il CMS? È possibile che sputi il link e poi lo avvolga in un arco prima di inviarlo al browser?

— Mammelle

L'azienda utilizza modx. Immagino di poterlo fare come ultima via d'uscita, ma volevo davvero annullarlo. Immagino non sia possibile. Grazie comunque.

— OptimusCrime

-1

prova a usare invece:

#test p:before {
    color: #B2B2B2;
    content: "► ";
    text-decoration: none;
}

andrà bene?

— Elen
fonte

Ho molti paragrafi nel mio div, quindi non funzionerà. Buona idea comunque.

— OptimusCrime

interessante chi ha messo -1 se la risposta accettata suggerisce lo stesso ma in forma diversa ...

— Elen

-4

Usa questo

#test  p:before {
    color: #B2B2B2;
    content: "► ";

}

— Bipin Chandra Tripathi
fonte

non fa niente. la decorazione del testo viene ignorata.

— OptimusCrime