Как сделать полоску на элементе меню, как у гугла и icons8

200
27 февраля 2018, 03:39

Как сделать полоску на элементе меню такую же, как на картинках?

Answer 1

Вариант с border:

* { 
  margin: 0; 
  padding: 0; 
} 
 
body { 
  font-family: Monospace, sans-serif; 
} 
 
.container { 
  padding: 0 15px; 
} 
 
li { 
  list-style-type: none; 
} 
 
a { 
  text-decoration: none; 
  color: black; 
  text-transform: uppercase; 
} 
 
.menu { 
  padding-top: 15px; 
  background-color: crimson; 
} 
 
.list { 
  display: flex; 
  justify-content: flex-end; 
} 
 
.list li { 
  padding-bottom: 15px; 
  margin-left: 15px; 
} 
 
.active { 
  border-bottom: 2px solid black; 
} 
 
.list li:hover { 
  border-bottom: 2px solid black; 
}
<nav class="menu"> 
  <div class="container"> 
    <ul class="list"> 
      <li class="active"><a href="#">Lorem</a></li> 
      <li><a href="#">Ipsum</a></li> 
      <li><a href="#">Dolor</a></li> 
      <li><a href="#">Amet</a></li> 
    </ul> 
  </div> 
</nav>

Answer 2
border-bottom: 3px solid #1A73E8;
color: #1A73E8;
font-weight: bold;
Answer 3
li:hover{border-bottom:3px solid#09f;}

наверное как-то так

READ ALSO
Как удалить css

Как удалить css

Как удалить css у одного объекта, если выставлены глобальные настройки вcss

189
position clone при drag&#39;n&#39;drop

position clone при drag'n'drop

Добрый деньПодскажите пожалуйста как изменить положение helper: 'clone'?

170
MySQL триггер на update

MySQL триггер на update

Здравствуйте, мудрые программисты, помогите правильно составить триггерЕсть сайт вопросов и ответов, на нем перечень всех вопросов и напротив...

214