Я хочу добиться следующего

enter image description here

Когда в данный момент выбрана ссылка, на левой стороне появляется сообщение. Я попытался добавить левую границу, но это толкает li вправо, чего я не хочу!

Вот мой код:


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

А вот и 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;
}
0
Saad Sawash 23 Окт 2019 в 16:39

3 ответа

Лучший ответ

Используйте вставку box-shadow.

Примечание . Ваш HTML-код недействителен. ul может только иметь li в качестве детей ... hr не разрешены,

.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 Окт 2019 в 13:47

Вы можете сделать следующее:

.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 Окт 2019 в 13:44

Попробуйте это, используя после или до этого:

.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 Окт 2019 в 13:49
58524199