css - link - Detener enlace: antes de que el contenido se subraye por regla aplicada al enlace

title div css

Question

Tengo un enlace de texto que está subrayado cuando se desplaza. Estoy agregando al comienzo del enlace un símbolo con el siguiente código:

.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; }

Pero lo que no quiero es que el > símbolo esté subrayado cuando el enlace está flotando. ¿Cómo logro esto?

Answer 1

Esta pregunta también se hizo en : hover: antes de que text-decoration ninguno tenga ningún efecto? y la respuesta https://stackoverflow.com/a/13376725/261747 funcionó para mí en IE.

Answer 2

Intenta esto si quieres una solución solo para CSS. Para que funcione en IE, debe activarlo explícitamente antes de desactivarlo para los pseudo elementos:

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

Así que en tu ejemplo necesitarías que esté escrito:

.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; }

Answer 3

Puede hacerlo css solo agregando display: inline-block al elemento: :before :

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

Demostración : http://jsfiddle.net/CaNyx/

Editar :

El problema es que con display: inline-block no se muestra el espacio, pero se puede corregir con white-space: pre o en white-space: pre-wrap

Demostración : http://jsfiddle.net/CaNyx/1/

Answer 4

Sé que esto no responde a cómo detener el subrayado del contenido anterior de un ancla.
Pero la mejor solución alternativa que encuentro cuando necesito este comportamiento es no usar a: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: ""; }

Entonces, especificar :before pseudo-clase para el elemento que envuelve el ancla, en lugar del ancla en sí parece la mejor solución en este momento.

Otro ejemplo si prefieres usar listas:

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 5

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

Se puede lograr solo con css, sin marcas html adicionales al establecer la posición: relativa al enlace y, respectivamente, la posición: absoluta a: antes del contenido.

Usando este ejemplo ...

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

... el css se verá así:

.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 6

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

Necesitas envolver un span alrededor del texto dentro de la a :

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

Y luego cambia tu CSS a esto:

.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; } .box.blueb a:before:hover { text-decoration: none; } no funciona porque cuando establece text-decoration: underline en un elemento (la a ), no puede eliminarlo en un descendiente ( :before ).