para - quitar subrayado hipervinculo html css
¿Cómo eliminar solo subrayado de a: antes? (6)
Tengo un conjunto de enlaces con estilo usando :before para aplicar una flecha.
Se ve bien en todos los navegadores, pero cuando aplico el subrayado al enlace, no quiero subrayar la parte :before (la flecha).
Ver jsfiddle por ejemplo: http://jsfiddle.net/r42e5/1/
¿Es posible eliminar esto? El estilo de prueba al que me senté con #test pa:hover:before se aplica (según Firebug), pero el subrayado aún está allí.
¿Alguna forma de evitar esto?
#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>
¿Es posible eliminar esto?
Sí, si cambia el estilo de visualización del elemento en línea de la display:inline (el valor predeterminado) para display:inline-block :
#test p a:before {
color: #B2B2B2;
content: "► ";
display:inline-block;
}
Esto se debe a que las especificaciones de CSS dicen :
Cuando se especifica o se propaga a un elemento en línea, afecta a todos los cuadros generados por ese elemento, y se propaga a cualquier cuadro de nivel de bloque en flujo que divida el en línea (ver sección 9.2.1.1). [...] Para todos los demás elementos, se propaga a cualquier niño en flujo. Tenga en cuenta que las decoraciones de texto no se propagan a descendientes flotantes y absolutamente posicionados, ni a los contenidos de los descendientes atómicos en línea, como los bloques en línea y las tablas en línea .
(Énfasis mío)
Demostración: http://jsfiddle.net/r42e5/10/
Gracias a @Oriol por proporcionar la solución alternativa que me impulsó a verificar las especificaciones y ver que la solución alternativa es legal.
Envuelva sus enlaces en tramos y agregue la decoración de texto al tramo en el a: hover como este,
a:hover span {
text-decoration:underline;
}
He actualizado tu violín a lo que creo que estás tratando de hacer. http://jsfiddle.net/r42e5/4/
Hay un error en IE8-11 , por lo que usa display:inline-block; solo no funcionará allí.
Encontré una solución para este error, estableciendo explícitamente text-decoration:underline; para el: before-content y luego sobrescribe esta regla nuevamente con text-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;}
Ejemplo de trabajo aquí: http://jsfiddle.net/95C2M/
Actualización: Dado que jsfiddle ya no funciona con IE8, simplemente pegue este simple código de demostración en un archivo html local y ábralo en 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>
Puedes hacerlo agregando lo siguiente al elemento: :before :
display: inline-block;
white-space: pre-wrap;
Con display: inline-block el subrayado desaparece. Pero entonces el problema es que el espacio después del triángulo colapsa y no se muestra. Para solucionarlo, puede usar white-space: pre-wrap o white-space: pre .
Demostración : http://jsfiddle.net/r42e5/9/
intente usar en su lugar:
#test p:before {
color: #B2B2B2;
content: "► ";
text-decoration: none;
}
¿Eso hará?
utilizar esta
#test p:before {
color: #B2B2B2;
content: "► ";
}