¿Buenas gente del foro como están? Estoy re-diseñando mi página de github pero tengo un pequeño detalle que seguramente es facil de arreglar:
¿Cómo se puede evitar el movimiento del control del enlace al crear un borde? Ya intenté ponerle un margen negativo, lo cuál funciona pero me hace el borde no visible... Estoy un poco falto de práctica con html+css por eso pregunto.
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <img src="" alt="Foto" srcset=""> <div class="contenedor-enlaces">
body
{
margin: 0px;
}
.menu
{
background-color: black;
width: 25%;
height: 100%;
position: fixed;
color: white;
}
.menu .portada h1
{
text-align: center;
}
.menu .portada img
{
display: block;
/*border-radius: 100%;*/
margin-left: auto;
margin-right: auto;
width: 50%;
}
.menu .contenedor-enlaces a
{
width: 100%;
display: block;
text-decoration: none;
color: white;
text-align: center;
padding-top: 6px;
padding-bottom: 6px;
}
.menu .contenedor-enlaces a:hover
{
border-left-width: 12px;
border-left-color: red;
border-left-style: solid;
background: #333;
}
.contenido
{
margin-left: 25%;
}
B#