Interrompi collegamento: prima che il contenuto venga sottolineato dalla regola applicata al collegamento

Question

Ho un collegamento testuale sottolineato al passaggio del mouse. Sto aggiungendo all'inizio del collegamento un simbolo > utilizzando il codice seguente:

.box.blueb a { color: #0098aa; } 
.box.blueb a:hover { text-decoration: underline; } 
.box.blueb a:before { content: "> "; } 
.box.blueb a:before:hover { text-decoration: none; } 

Ma quello che non voglio il simbolo > sottolineato quando il collegamento viene aleggiava. Come ottengo questo?

Answer 1

http://jsfiddle.net/thirtydot/LmvgM/1/

È necessario avvolgere un span intorno al testo all'interno del a:

<div class="box blueb"> 
    <a href="#"><span>Hello</span></a> 
</div> 

E poi modificare il CSS a questo:

.box.blueb a { color: #0098aa; text-decoration: none; } 
.box.blueb a:hover > span { text-decoration: underline; } 
.box.blueb a:before { content: "> "; } 

.box.blueb a:before:hover { text-decoration: none; } non funziona perché quando si imposta text-decoration: underline su un elemento (a), you can't then remove it su un discendente (:before).

Answer 2

http://jsfiddle.net/LmvgM/8/

può essere raggiunto solo css, senza ulteriori markup html modificando posizione: relativo al collegamento, e rispettivamente la posizione: assoluta: prima del contenuto.

Utilizzando questo esempio ...

<div class="box blueb"> 
    <a href="#">Hello</a> 
</div> 

... il css sarà simile a questa:

.box.blueb a { 
    color: #0098aa; 
    position: relative; 
    margin-left: 5px; 
    padding-left: 10px; 
    text-decoration: none; 
} 

.box.blueb a:before { 
    content: "> "; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

.box.blueb a:hover { 
    text-decoration: underline; 
} 

Answer 3

lo si può fare solo CSS aggiungendo display: inline-block all'elemento :before:

.box.blueb a { color: #0098aa; } 
.box.blueb a:hover { text-decoration: underline; } 
.box.blueb a:before { content: "> "; display:inline-block; } 

Demo: http://jsfiddle.net/CaNyx/

---

Edit:

Il problema è che con display: inline-block lo spazio non è visualizzato, ma è possibile risolvere il problema con white-space: pre o white-space: pre-wrap

Demo: http://jsfiddle.net/CaNyx/1/

Answer 4

Questa domanda è stata anche richiesta allo :hover:before text-decoration none has no effects? e la risposta https://stackoverflow.com/a/13376725/261747 ha funzionato f o anche io in IE.

Answer 5

So che questo non risponde come fermare un ancoraggio prima che il contenuto venga sottolineato.
Ma la soluzione migliore che trovo quando ho bisogno di questo comportamento è non usandoa:before.

HTML:

<nav class="breadcrumb"> 
    <span><a href="#">Test 1</a></span> 
    <span><a href="#">Test 2</a></span> 
    <span><a href="#">Test 3</a></span> 
</nav> 

CSS:

nav.breadcrumb > span:before    { content: "> "; } 
nav.breadcrumb > span:first-child:before { content: ""; } 

Quindi, specificando :before pseudo-classe per l'elemento che avvolge l'ancora, invece dell'ancora stessa sembra come la soluzione al meglio il momento.

---

Un altro esempio, se si preferisce utilizzando gli elenchi:

HTML:

<ul class="breadcrumb"> 
    <li><a href="#">Test 1</a></li> 
    <li><a href="#">Test 2</a></li> 
    <li><a href="#">Test 3</a></li> 
</ul> 

CSS:

ul.breadcrumb       { margin: 0; padding: 0; } 
ul.breadcrumb > li     { display: inline;  } 
ul.breadcrumb > li:before    { content: "> ";   } 
ul.breadcrumb > li:first-child:before { content: "";   } 

Answer 6

Prova questa se si vuole un CSS unica soluzione. Per farlo funzionare in IE, è necessario attivare in modo esplicito sulla prima lo si spegne per gli elementi pseudo:

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

Quindi nel tuo esempio, si avrebbe bisogno di essere scritto:

.box.blueb a { text-decoration:none; } 
.box.blueb a:hover { text-decoration: underline; } 
.box.blueb a:before { text-decoration: underline; } 
.box.blueb a:before, 
.box.blueb a:before:hover { text-decoration: none; }