¿Cómo eliminar solo subrayado de a: before?

Tengo un conjunto de enlaces con estilo usando el :before para aplicar una flecha.

Se ve bien en todos los navegadores, pero cuando aplico el subrayado al enlace, no quiero tener subrayado en la parte :before (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:before se aplica (de acuerdo con Firebug), pero el subrayado sigue ahí.

Cualquier 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>
Author: Michael_B, 2012-01-11
Source

6 answers

¿Es posible eliminar esto?

Sí, si cambia el estilo de visualización del elemento inline de display:inline (el predeterminado) a display:inline-block: 

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

Esto es porque las especificaciones CSS dicen :

Cuando se especifica o se propaga a un elemento inline, afecta a todas las cajas generadas por ese elemento, y se propaga a cualquier caja de nivel de bloque en flujo que divida el inline (ver sección 9.2.1.1). [For] 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 al contenido de descendientes atómicos de nivel inline, como bloques inline y tablas inline.

(Énfasis mío.)

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

Gracias a @Oriol por proporcionar la solución que me llevó a comprobar las especificaciones y ver que la solución es legal.

 130
Author: Phrogz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-06-28 00:41:53

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

He encontrado una solución para este error, estableciendo explícitamente text-decoration:underline; para el :before-content y luego sobrescribir esta regla de nuevo 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 /

Actualizar: 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>
 47
Author: LeJared,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-05-15 07:04:14

Puedes hacerlo añadiendo 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 arreglarlo, puede usar white-space: pre-wrap o white-space: pre.

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

 5
Author: Oriol,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-06-27 15:19:49

Envuelva sus enlaces en tramos y agregue la decoración de texto al tramo en el a:hover de esta manera, 

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

He actualizado su violín a lo que creo que está tratando de hacer. http://jsfiddle.net/r42e5/4 /

 1
Author: Udders,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-01-11 13:47:12

Intenta usar en su lugar:

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

¿Servirá eso?

 -1
Author: Elen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-01-11 13:48:50

Usa esto 

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

}
 -4
Author: Bipin Chandra Tripathi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-01-11 14:14:33