Quiero lograr lo siguiente
Cuando actualmente se selecciona un enlace, el blip aparece en su lado izquierdo. ¡Intenté agregar un borde izquierdo pero eso empuja el li a la derecha, lo que no quiero!
Aquí está mi código:
<nav class="side-nav">
<ul>
<li class="current-link"><a href="#"><i class="fa fa-home"></i>Home</a></li>
<li><a href="#"><i class="fa fa-film"></i>Movies</a></li>
<li><a href="#"><i class="fa fa-television"></i>TV Shows</a></li>
<hr>
<li><a href="#"><i class="fa fa-thumbs-up"></i>Liked</a></li>
<li><a href="#"><i class="fa fa-thumbs-down"></i>Disliked</a></li>
<hr>
<li><a href="#"><i class="fa fa-sliders"></i>Settings</a></li>
</ul>
</nav>
Y aquí está la CSS:
.side-nav {
background-color: rosybrown;
margin-top: 50px;
height: 50%;
}
.side-nav ul {
list-style: none;
padding: 0;
}
.side-nav ul li {
padding-left: 20px;
margin: 10px 0 20px 0;
}
.side-nav ul li a {
text-decoration: none;
}
/* === UTILITY CLASSES === */
.current-link {
border-left: 8px solid red;
}
3 respuestas
Use un recuadro box-shadow
.
Nota : su HTML no es válido. ul
puede solo tener li
como hijos ... hr
no están permitidos,
.side-nav {
background-color: rosybrown;
margin-top: 50px;
height: 50%;
}
.side-nav ul {
list-style: none;
padding: 0;
}
.side-nav ul li {
padding-left: 20px;
margin: 10px 0 20px 0;
}
.side-nav ul li a {
text-decoration: none;
}
/* === UTILITY CLASSES === */
.current-link {
box-shadow: 8px 0 0 0 red inset;
}
<nav class="side-nav">
<ul>
<li class="current-link"><a href="#"><i class="fa fa-home"></i>Home</a></li>
<li><a href="#"><i class="fa fa-film"></i>Movies</a></li>
<li><a href="#"><i class="fa fa-television"></i>TV Shows</a></li>
<li><a href="#"><i class="fa fa-thumbs-up"></i>Liked</a></li>
<li><a href="#"><i class="fa fa-thumbs-down"></i>Disliked</a></li>
<li><a href="#"><i class="fa fa-sliders"></i>Settings</a></li>
</ul>
</nav>
Podría hacer lo siguiente:
.side-nav ul li {
padding-left: 12px; //Reduce the padding with the width of the border
border-left: 8px solid transparent; // Make the border transparent so it doesnt show
margin: 10px 0 20px 0;
}
/* === UTILITY CLASSES === */
.current-link {
border-left-color: red; // Only change the color of the border
}
Prueba esto usando después o antes de esta manera:
.side-nav ul li a {
text-decoration: none;
position: relative;
}
.current-link a:after {
content:"";
height: 20px;
width: 8px;
background-color: red;
display: block;
position: absolute;
left: -20px;
bottom: -2px;
}
Nuevas preguntas
html
HTML (HyperText Markup Language) es el lenguaje de marcado para crear páginas web y otra información que se mostrará en un navegador web. Las preguntas sobre HTML deben incluir un ejemplo mínimo reproducible y una idea de lo que está tratando de lograr. Esta etiqueta rara vez se usa sola y, a menudo, se combina con [CSS] y [javascript].