Size: a a a

htmlbase.ru - чат по front-end разработке

2019 July 02

А

Александер 😈 in htmlbase.ru - чат по front-end разработке
Санжар
Спасибо)))
ну допустим
у нас есть

html:

<nav class="nav">
    <a class="nav__item" href="#">nav item</a>
   <a class="nav__item" href="#">nav item2</a>
</nav>

css:

.nav {
display: flex;
}

.nav__item {
margin-right: 30px;
dispaly: block;
position: relative;
}

.nav__item:last-child {
margin:-right: 0;
}

.nav__item:after {
 width: 25px;
 height: 1px;
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
background-color: #fff;
content: '';
}
источник

С

Санжар in htmlbase.ru - чат по front-end разработке
🔥🔥🔥
источник

А

Александер 😈 in htmlbase.ru - чат по front-end разработке
если делать чёрточку по ниже
можно либо bottom:  отрицательное значение
либо для ссылок добавить padding-bottom
либо для after top: 100%;
источник

С

Санжар in htmlbase.ru - чат по front-end разработке
Хм
источник

С

Санжар in htmlbase.ru - чат по front-end разработке
Спасибо)
источник

А

Александер 😈 in htmlbase.ru - чат по front-end разработке
а ну
источник

А

Александер 😈 in htmlbase.ru - чат по front-end разработке
еще один момент не описал
источник

А

Александер 😈 in htmlbase.ru - чат по front-end разработке
сейчас они сразу видны
источник

VK

Vladimir Krichkovsky in htmlbase.ru - чат по front-end разработке
Круто получается)))
источник

А

Александер 😈 in htmlbase.ru - чат по front-end разработке
дописываешь  для :after {
opacity: 0;
transition: opacity .2s ease; (это эффект чтобы была плавность)
}

потом .nav__item:hover:after {
opacity: 1;
}
источник

АО

Александр Октябрь in htmlbase.ru - чат по front-end разработке
Сейчас гляну)
источник

С

Санжар in htmlbase.ru - чат по front-end разработке
Александер 😈
дописываешь  для :after {
opacity: 0;
transition: opacity .2s ease; (это эффект чтобы была плавность)
}

потом .nav__item:hover:after {
opacity: 1;
}
Круть))
источник

А

Александер 😈 in htmlbase.ru - чат по front-end разработке
Александр Октябрь
Сейчас гляну)
ewe odin moment, ссылкы имеют при ховере text-decoration  чтобы его убрать
.nav__item:hover {
text-decoration: none;
}
источник

А

Александер 😈 in htmlbase.ru - чат по front-end разработке
источник

А

Александер 😈 in htmlbase.ru - чат по front-end разработке
источник

АО

Александр Октябрь in htmlbase.ru - чат по front-end разработке
Проверил. Получилось)
источник

А

Александер 😈 in htmlbase.ru - чат по front-end разработке
👍🏻
источник

АО

Александр Октябрь in htmlbase.ru - чат по front-end разработке
<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;
}
источник

АО

Александр Октябрь in htmlbase.ru - чат по front-end разработке
А если так сделать?
источник

L

Link in htmlbase.ru - чат по front-end разработке
Все доброго времени суток , у меня тоже есть задачка . Есть заголовок с  слева и справа нужно добавить полоски , как это можно реализовать с помощью псевдокласов помогите пожалуйста !!!
источник