Duda con CSS

Archivado
Hola a todos.

Veréis, estoy intentando añadir los corchetes que aparecen el menú de cabecera de este tema Wordpress a otro que tengo yo:

http://dione.thememove.com/

Usando las clases ...:hover:after y ...:hover:before consigo que se muestren al pasar el ratón por encima. Pero usando esos mismos atributos no consigo hacer funcionar el transition así que no me muestra la animación. ¿Alguien sabe dónde puede estar el problema?

Gracias.

Un saludo
Bajate la CSS que usa la pagina y mira estas clases:
menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-has-children menu-item-1161 mega-menu

En alguna de ellas estara como se hizo.
@Delian gracias por la respuesta.

El código CSS que necesito sí lo conozco, con lo que no me aclaro es con los selectores. Por ejemplo, para el corchete de la izquierda (before):

.navbar-nav > li:before {
content: '[';
left: -5px;
    position: absolute;
    top: 50%;
    margin-top: -11px;
    opacity: 0;
    visibility: hidden;
}


.navbar-nav > li:hover:before {
    opacity: 1;
    visibility: visible;
}


Con esto consigo que aparezca y desaparezca el corchete según paso o no el ratón por encima.


.navbar-nav > li:before {
    -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
}


Sin embargo, usando este selector no consigo hacer funcionar la transición...
Esto es BootStrap? Ando un poco perdido con CSS3, lo siento, soy mas de Backend jeje
Vale, la transición sí funciona, lo que sucede es que no comienza a moverse desde el lateral. Es como si no estuviera teniendo en cuenta lo que le digo de:

left: -5px

Vale, me autoedito por si le sirve a alguien. Todo resuelto, es que no entendía bien cómo funciona, hay que decirle que empiece primero en -5px y acabe en 0px con:

.navbar-nav > li:hover:before {
content: '[';
left: 0px;
}

Y listo!

Gracias!
4 respuestas
Archivado
Volver a General