Я хочу добиться следующего
Когда в данный момент выбрана ссылка, на левой стороне появляется сообщение. Я попытался добавить левую границу, но это толкает 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
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
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
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
23 Окт 2019 в 13:49