tengo el siguiente problema.
Como pueden observar tengo el siguiente Menú lateral:
Para que sea más bonito visualmente hice que las letras quedaran resaltadas cuando el ratón pasa sobre ellas y lo mismo quería hacer con las banderas. Para ello, generé el siguiente CSS:
.menu{
width: 300px;
height: 100vh;
background-color: $mainColor;
position: fixed;
top: 0;
right: -300px;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s ease;
&.active {
right: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
font-size: 30px;
font-weight: 300;
color: ghostwhite;
width: 60%;
li{
margin: 15px 0px;
text-align: center;
img {
margin-left: 5px;
margin-right: 5px;
height: 20%;
width: 20%;
&:hover {
border-radius: 50%;
border: white 2px solid;
}
}
a{
font-size: inherit;
color:inherit;
text-decoration: none;
}
&:hover{
font-weight: 500;
}
}
}
}
El problema está en que, mientras que con las palabras no tengo ningún problema, al aplicar margen a la bandera seleccionada las líneas <hr/>
que hay por encima y por debajo se mueven separándose respectivamente la una de la otra. Entiendo que la bandera pasa a tener más tamaño y que es lógico que se desplacen, pero también lo hacen las palabras al quedar resaltadas. Soy bastante nuevo en CSS y me gustaría saber como podría solucionar esto.
Un saludo.