¿Cómo eliminar solo el subrayado de un: antes?

94

Tengo un conjunto de enlaces con estilo que usan :beforepara aplicar una flecha.

Se ve bien en todos los navegadores, pero cuando aplico el subrayado al enlace, no quiero tener subrayado en la :beforeparte (la flecha).

Ver jsfiddle por ejemplo: http://jsfiddle.net/r42e5/1/

¿Es posible eliminar esto? El estilo de prueba con el que me senté #test p a:hover:beforese aplica (según Firebug), pero el subrayado sigue ahí.

¿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>

Expandir fragmento

— OptimusCrime
fuente

Bueno, obviamente quieres una lista ... Usa un elemento UL en lugar de la combinación DIV / P. Con listas obtienes las balas (o discos, ...) gratis ...

— Šime Vidas

¿Por qué no utilizar una lista con viñetas personalizadas en lugar de párrafos en su caso? De lo contrario, aplique el contenido anterior al padre p, no para vincularse a sí mismo.

— YuS

Posible duplicado de stackoverflow.com/questions/8536015/…

— Oriol

171

¿Es posible eliminar esto?

Sí, si cambia el estilo de visualización del elemento en línea de display:inline(el predeterminado) a 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 todas las cajas generadas por ese elemento y se propaga a cualquier caja de nivel de bloque de flujo que divida la línea (consulte la sección 9.2.1.1). […] Para todos los demás elementos, se propaga a cualquier elemento secundario de flujo. Tenga en cuenta que las decoraciones de texto no se propagan a los descendientes flotantes y absolutamente posicionados, ni al contenido de los descendientes atómicos de nivel en línea, como bloques en línea y tablas en línea .

(El énfasis es mío.)

Demostración: http://jsfiddle.net/r42e5/10/

_{Gracias a @Oriol por proporcionar la solución que me impulsó a verificar las especificaciones y ver que la solución es legal.}

— Phrogz
fuente

2

Puede anular un elemento text-decoration:underlineaplicado a un padre con display:inline-block. Vea un ejemplo: jsfiddle.net/aZdhN/1 . Entonces, el problema del autor de la pregunta se puede resolver así: stackoverflow.com/a/17347068/1529630

— Oriol

3

Por lo que puedo ver, esto no funciona en Internet Explorer (probado 8-10). ¿Alguna idea de cómo lidiar con IE?

— Linus Caldwell

Encontré una solución que también funciona en IE8-11: stackoverflow.com/a/21902566/1607968

— LeJared

52

Hay un error en IE8-11 , por lo que usar display:inline-block;solo no funcionará allí.

Encontré una solución para este error, estableciendo explícitamente text-decoration:underline;: before-content y luego sobrescribiendo esta regla nuevamente 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;}

Ejemplo de trabajo aquí: http://jsfiddle.net/95C2M/

Actualización: dado que jsfiddle ya no funciona con IE8, simplemente pegue este código de demostración simple 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>

— LeJared
fuente

Hubo un caso en el que el subrayado de IE8 de una imagen con hipervínculo solo podía desactivarse desde <img style="text-decoration:underline">adentro (y aquí estaba la clave)<a style="padding:0; border:none;">

— Bob Stein

Desafortunadamente, jsfiddle no se puede verificar en IE8 porque jsfiddle no funciona en IE8.

— user2867288

Desafortunadamente, no pude encontrar ninguna herramienta para compartir código en línea que aún funcione con IE8. Agregué un código recortado a la respuesta anterior que puede pegar en un archivo html y abrirlo localmente en IE8.

— LeJared

Probado y aprobado en IE9, evento sin dos estados diferentes.

— saeraphin

Tenía un enlace con un ícono en: antes se suponía que NO debía estar subrayado en estado de reposo, luego estar subrayado al pasar el mouse, pero no el ícono. Esto es lo que tuve que hacer para convencer a IE de que hiciera esto bien: a {text-decoration: none} a: before {text-decoration: underline} a: before {text-decoration: none} (sí, realmente, primer subrayado, luego sobrescribir con ninguno) a: hover {text-decration: underline} a: hover: before {text-decoration: none}

— Fake Haak

7

Puedes hacerlo agregando lo siguiente al :beforeelemento:

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

Con display: inline-blockel 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-wrapo white-space: pre.

Demostración : http://jsfiddle.net/r42e5/9/

— Oriol
fuente

1

+1 para la pre-wrappista. Estaba usando content:'►\a0'(\ a0 = & nbsp;)

— Hashbrown

1

Envuelva sus enlaces en tramos y agregue la decoración de texto al tramo en a: hover así,

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

He actualizado tu violín a lo que creo que estás intentando hacer. http://jsfiddle.net/r42e5/4/

— Ubres
fuente

Buena idea. Así fue como lo hice antes. El problema es que este enlace se produce en un sistema cms y nuestros clientes lo están completando como texto enriquecido.

— OptimusCrime

¿Qué idioma es el CMS? ¿Podría hacer que escupiera el enlace y luego lo envolviera en un lapso antes de enviarlo al navegador?

— Ubre

La empresa está utilizando modx. Supongo que podría hacer eso como una última salida, pero realmente quería anular eso. Supongo que no es posible. Gracias de todos modos.

— OptimusCrime

-1

intente usar en su lugar:

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

¿Eso servirá?

— Elen
fuente

Tengo muchos párrafos en mi div, por lo que no funcionará. Aunque buena idea.

— OptimusCrime

interesante quién puso -1 si la respuesta aceptada sugiere lo mismo pero en una forma diferente ...

— Elen

-4

utilizar este

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

}

— Bipin Chandra Tripathi
fuente

no hace nada. la decoración de texto se ignora.

— OptimusCrime