Diseñar un tramo dentro de una etiqueta de ancla

Question

Estoy tratando de que se vea bonito, pero me he encontrado con un problema. Tengo un elemento span que contiene un subtítulo o una breve descripción dentro de la etiqueta de anclaje. Desafortunadamente, tiene el mismo estilo que el ancla, que no es como yo quiero que sea. Intenté aplicar el estilo al envergadura en sí, pero parecen estar anulados por los estilos de anclaje. El problema es que no quiero que esté subrayado cuando el enlace está sobrevolado.

Aquí está mi html.

 <ul> 
      <li><a href="#">A <span class="subTitle">Subtitle</span></a></li> 
      <li><a href="#">B <span class="subTitle">Subtitle</span></a></li> 
      <li><a href="#">C <span class="subTitle">Subtitle</span></a></li> 
      <li><a href="#">D <span class="subTitle">Subtitle</span></a></li> 
      <li><a href="#">E <span class="subTitle">Subtitle</span></a></li> 
     </ul> 

Y mi CSS

#leftNav ul li { position: relative; } 
#leftNav ul li a span.subTitle 
{ 
    bottom:   4px; 
    color:   #000000; 
    display:   block; 
    font-size:  12px; 
    left:   10px; 
    position:  absolute; 
    text-decoration: none; 
} 

he intentado peinar el lapso en sí, lo que no parece tener ningún efecto. Tampoco funciona colocar el tramo fuera del ancla, en relación con el li. el span bloquea el evento de desplazamiento del ancla y no se puede hacer clic.

Answer 1

Una prueba de su código de ejemplo (añadiendo en un div adecuada con id alrededor de ella) parece funcionar bien:

http://jsfiddle.net/44ndf/1/

Su estilo por defecto será por supuesto el lo mismo que el anclaje, por lo que es posible que tenga que anular las cosas a la normalidad. Deberá proporcionar una muestra que funcione (o más exactamente, que no funcione) para que podamos precisar con precisión dónde se encuentra su problema.

En conclusión, aunque las cosas a verificar incluyen:

1) Que sus selectores están definitivamente apuntan a los elementos correctos (por ejemplo, en lo anterior he tenido que incluir un div con id "leftnav" para hacer que el selector de recogerlo hasta

2) Definitivamente no tiene estilos conflictivos, posiblemente algo con mayor precedencia o posiblemente algo con un valor importante que lo anule.

3) Use Firebug para ver exactamente qué estilos se están aplicando desde qué selectores CSS para identificar dónde se encuentran sus problemas.

Editar:

En el caso del subrayado parece que es imposible (o al menos no hay manera que he encontrado) para anular el labrar. Así que en vez he cambiado el margen de beneficio de todo un poco:

http://jsfiddle.net/44ndf/2/

<a href="#"><span>A </span><span class="subTitle">Subtitle</span></a> 

Con este marcado se puede establecer estilos de la siguiente manera:

#leftNav ul li a span.subTitle 
{ 
    text-decoration: none; 
} 

#leftNav ul li a span 
{ 
text-decoration: underline; 
} 

#leftNav ul li a 
{ 
text-decoration: none; 
} 

Esto básicamente le dice al anclaje no tener subrayados. Todos los tramos tienen subrayados y luego el tramo de subtítulos para no tener subrayados. Necesitará, obviamente, asegurarse de que todo lo que quiera subrayar esté en un lapso (todo lo que no esté en un tramo no estará subrayado).

Por lo que vale, parece un error del navegador para mí, ya que IE parece comportarse bien - http://jsfiddle.net/44ndf/5/ no tiene subrayado en los subtítulos en IE, pero lo hace en Firefox. Sospecho que hay algo abotu especial en los subrayados de los anclajes que no han sido anulados.

Answer 2

No estoy seguro de cuál es el problema porque no puedo ver qué etiqueta de anclaje tiene, pero siempre puede probar !important después de la regla css. Algo como esto:

#leftNav ul li a span.subTitle 
{ 
    bottom:   4px; 
    display:   block; 
    font-size:  12px !important; 
    left:   10px; 
    position:  absolute; 
}