Enlace actual en un elemento de navegación

Question

Quiero lograr lo siguiente

enter image description here

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;
}

html css

0

Saad Sawash 23 oct. 2019 a las 16:39

Answer 1

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>

1

Paulie_D 23 oct. 2019 a las 13:47

Answer 2

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
}

1

Keyboard ninja 23 oct. 2019 a las 13:44

Answer 3

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;
}

1

Akshita Karetiya 23 oct. 2019 a las 13:49

Enlace actual en un elemento de navegación

3 respuestas

Nuevas preguntas

html