que tiene enlaces como:decoración de texto para el enlace y vuelta dentro de este enlace
<a href="#">Link text<span>Link sub-text</span></a>
Al pasar Necesito ese texto dentro lapso no está decorado con subrayado (pero principal texto del enlace es). ¿Es posible? He intentado:
a:hover span {text-decoration:none;}
Esto no está funcionando.
¿Hay alguna solución para esto?
Añadir texto del enlace (texto que desea ser decorado con subrayado) en el interior <span> y el sub-texto fuera como texto enlace normal, como:
<a href="#"><span>Link text</span>sub-text</a>
Para decorar texto uso Enlace:
a:hover {
text-decoration:none;
}
a:hover span {
text-decoration:underline;
}
Otra solución es el uso de colores en lugar de subrayados como su identificador:
<a id="outer-link" href="#">
Outer text <span id="inner-text">inner text</span> more outer text.
</a>
<style>
a { text-decoration: none; }
#outer-link:hover { color: green; }
#outer-link:hover #inner-text { color: red; }
</style>
Sí, puede, también puede ser en negrita, cursiva, en mayúscula, etc., no publique de todas las formas posibles, la pregunta fue solo sobre subrayados. Gracias. – wzazza
a si La solución mple es usar las propiedades color y border, en lugar de text-decoration. Primero debe establecer text-decoration: none y luego usar border-bottom como subrayado para todos sus enlaces.
style.css
a, a:link, a:visited
{
color: #11bad3;
text-decoration: none;
border-bottom: 1px solid #11bad3;
}
a:hover, a:active
{
background: #00a9c2;
border-color: #00a9c2;
color: #fff;
}
print.css
a, a:link, a:visited
{
border-bottom: 0px;
}
index.html
<link rel="stylesheet" href="assets/css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="assets/css/print.css" type="text/css" media="print">
Sé que esto es un ol d post, pero como solo tenía el mismo problema, y se me ocurrió una solución, pensé que lo escribiría de todos modos.
En lugar de tratar de usar text-decoration: underline, en lugar de simplemente utilizar border-bottom: 1px solid # 000, de esta manera, se puede decir simplemente border-bottom: ninguno,
Sólo pensé que fuera, sólo necesito para colocar el texto del enlace principal dentro del span y el texto del subvínculo fuera del alcance del enlace como: 'Link textsub-text' y CSS: 'a: hover {text-decoration: none;} a: hover span {text-decoration: underline; } ' Esto funcionó para mí. – wzazza
Relacionado: [la propiedad de decoración de texto de CSS no puede anularse mediante el elemento secundario] (http://stackoverflow.com/questions/4481318/css-text-decoration-property-cannot-be-overridden-by-child-element) y [¿Cómo hago para que funcione esta anulación de decoración de texto CSS?] (Http://stackoverflow.com/questions/1823341/how-do-i-get-this-css-text-decoration-override-to-work) - Estas preguntas explican por qué 'text-decoration none' dentro del' span' no funciona. Así que sí, tu solución es prácticamente la única forma de evitar esto. – BoltClock