АО
Все доброго времени суток , у меня тоже есть задачка . Есть заголовок с слева и справа нужно добавить полоски , как это можно реализовать с помощью псевдокласов помогите пожалуйста !!!
Есть картинка?
Size: a a a
2019 July 02
А
Все доброго времени суток , у меня тоже есть задачка . Есть заголовок с слева и справа нужно добавить полоски , как это можно реализовать с помощью псевдокласов помогите пожалуйста !!!
визуально покажи
А
<ul class="menu">
<li class="menu__item">
<a class="menu__link" href="#">home</a>
<div class="menu__link--border"></div>
</li>
<li class="menu__item">
<a class="menu__link" href="#">projects</a>
<div class="menu__link--border"></div>
</li>
<li class="menu__item">
<a class="menu__link" href="#">what we do</a>
<div class="menu__link--border"></div>
</li>
<li class="menu__item">
<a class="menu__link" href="#">about us</a>
<div class="menu__link--border"></div>
</li>
<li class="menu__item">
<a class="menu__link" href="#">contact us</a>
<div class="menu__link--border"></div>
</li>
<li class="menu__item">
<i class="menu__link fas fa-search"></i>
</li>
</ul>
.menu {
padding-top: 35px;
display: flex;
list-style-type: none;
margin: 0 0;
}
.menu__link {
font-size: 14px;
font-weight: 700;
color: #ffb932;
text-decoration: none;
text-transform: uppercase;
}
.menu__item {
display: flex;
flex-direction: column;
align-items: center;
padding-left: 30px;
height: 22px;
}
.menu__item:hover .menu__link {
color: #ffffff;
}
.menu__item:hover .menu__link--border {
width: 25px;
height: 22px;
border-bottom: 2px solid #ffffff;
}
menu__link--border как минимум вы не правильно используете BM :)
А
<ul class="menu">
<li class="menu__item">
<a class="menu__link" href="#">home</a>
<div class="menu__link--border"></div>
</li>
<li class="menu__item">
<a class="menu__link" href="#">projects</a>
<div class="menu__link--border"></div>
</li>
<li class="menu__item">
<a class="menu__link" href="#">what we do</a>
<div class="menu__link--border"></div>
</li>
<li class="menu__item">
<a class="menu__link" href="#">about us</a>
<div class="menu__link--border"></div>
</li>
<li class="menu__item">
<a class="menu__link" href="#">contact us</a>
<div class="menu__link--border"></div>
</li>
<li class="menu__item">
<i class="menu__link fas fa-search"></i>
</li>
</ul>
.menu {
padding-top: 35px;
display: flex;
list-style-type: none;
margin: 0 0;
}
.menu__link {
font-size: 14px;
font-weight: 700;
color: #ffb932;
text-decoration: none;
text-transform: uppercase;
}
.menu__item {
display: flex;
flex-direction: column;
align-items: center;
padding-left: 30px;
height: 22px;
}
.menu__item:hover .menu__link {
color: #ffffff;
}
.menu__item:hover .menu__link--border {
width: 25px;
height: 22px;
border-bottom: 2px solid #ffffff;
}
лучше всего подходит псевдо элемент (:before или :after)
А
Есть картинка?
padding-left как по мне тоже не очень хорош тут
А
т.к
АО
Александер 😈
лучше всего подходит псевдо элемент (:before или :after)
Вот насчет бэма согласен. Я понимаю его суть, но где и как и как использовать пока проблемно. Где именно ошибка?)
А
Александер 😈
padding-left как по мне тоже не очень хорош тут
т.к у тебя первая ссылка еще отталкивается слева)) хотябы для first-child сделать 0
А
menu__link--border
А
с этим дивом
С
Александер 😈
menu__link--border
menu__link-border ?
А
menu__link-border ?
именно либо просто .border например )
А
и писать через родителя, он всё равно только тут используется
АО
padding-left потому что последний элемент находится на своем месте (в контексте всей верстки там ошибки нет)
С
Александер 😈
именно либо просто .border например )
Ну да или так
АО
Александер 😈
и писать через родителя, он всё равно только тут используется
Я из своего кода выдернул все. и пишу через less)
А
А
лучше не использовать BM чем его использовать не правильно :)
С
Александер 😈
лучше не использовать BM чем его использовать не правильно :)
Согласен)
АО
Александер 😈
лучше не использовать BM чем его использовать не правильно :)
Лучше научится использовать правильно. Никто простым языком не обьясняет. А в моей логике .menu__link--border модифицирует .menu__link)))