css: después de contenido no subrayado

Para separar los eslabones de la navegación he puesto el siguientecss: después de contenido no subrayado

#menu-main li a:after{ 
    content: " * "; 
}

El elemento actual se pone adicional

text-decoration: underline;

mi problema ahora es, que el "*" es también subrayó, pero no debería

he intentado añadir

#menu-main li a:after{ 
    text-decoration: none !important; 
}

pero no tiene efecto

¿Alguien tiene una idea de cómo mantener el texto subrayado pero no el: después del contenido?

Fuente

2012-10-03 oliverspies

En flujo normal, el pseudo elemento expande las dimensiones del elemento, y lo que se ve es el subrayado del subrayado del enlace en sí. Agregue a:after {text-decoration: line-through;} para verificar.

He aquí una propuesta de solución: http://jsfiddle.net/Ronny/Smr38/

Básicamente, cuando se utiliza position: absolute de los pseudo-elementos que ya no afectan a las dimensiones de sus elementos primarios, por lo que los subrayados son cortadas en el lugar correcto. Todavía tiene que ocuparse de cosas como eventos de puntero, estado de desplazamiento y anillos de enfoque, pero dejé al menos esto último para que lo descubra.

Fuente

2012-10-03 13:19:05 Ronny

esto funciona perfecto para mí; gracias – oliverspies

Eso funciona en Chrome, pero no en IE (incluso 10). – Puzbie

si usted está en control de marcado, se puede insertar un palmo de su enlace

<a href="..."><span>your link</span></a>

y utilizar esto css

a { text-decoration: none } 
a span { text-decoration: underline }

hacerlo, el contenido se inyecta en el won :after pseudoelement no se subraya

de lo contrario, puede aplicar el estilo a li:after (si es posible) como

#menu-main li:after{ 
    content: " * "; 
}

Fuente

2012-10-03 12:49:48 fcalderan

Se debe evitar agregar marcas para ayudar con el estilo. Aplicar la pseudoclase al elemento de la lista es una mejora, pero una vez más, se tuerce con la semántica por el estilo. – daddywoodland

cómo un seudoelemento puede afectar la semántica? El OP ya ha colocado el '*' dentro de otro pseudoelemento, por lo que se mantiene la semántica original. – fcalderan

Justo lo suficiente, agregar el asterisco al elemento de la lista no afecta la semántica. Sin embargo, obviamente, agregar un tramo para ayudar al diseño hace. – daddywoodland

Es una vieja pregunta, pero es lo que encuentras al usar Google, así que pensé en compartir mi solución cuando necesitas que el pseudo-elemento contribuya al tamaño del "padre" y el posicionamiento absoluto no es una opción para alguna razón:

#menu-main li a:after{ 
    content: " * "; 
    display:inline-block; /* So we can set a width */ 
    width: 0; 
    margin-left: 10px; /* "Size" of the Pseudo-element */ 
}

Dado que la anchura es de 0, que no muestra una text-decoration. Esto también implica menos código y menos dependencias entre sus estilos en comparación con la respuesta aceptada.

Fuente

2015-07-13 09:43:40 Anpan

En mi caso, ni siquiera necesito el ancho, simplemente funciona agregando bloque en línea.

Fuente

2015-08-25 12:06:36

css: después de contenido no subrayado

Respuesta

Cuestiones relacionadas