Блог

Главная - Вопросы по программированию - Граница активной ссылки/подчеркивание

Граница активной ссылки/подчеркивание

#css

#css

Вопрос:

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

введите описание изображения здесь

 * {
  margin: 0;
  padding: 0;
}

.header {
  display: flex;
  justify-content: space-between;
  padding: 15px 20px;
  position: sticky;
  background-color: white;
  z-index: 100;
  top: 0;
  box-shadow: 0px 5px 8px -9px rgba(0, 0, 0, 75);
}

.header__left>img {
  height: 40px;
}

.header__center {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.header__option {
  display: flex;
  align-items: center;
  padding: 0 2vw;
  cursor: pointer;
  height: 52px;
}

.header__right {
  display: flex;
}

.header__info {
  display: flex;
  align-items: center;
  padding-right: 12px;
}

.header__info>span {
  margin-left: 10px;
}

.header__option.active>i {
  color: #1877f2;
  border-bottom: 1px solid red;
  border-bottom-width: 3px;
  bottom: 0;
}

.header__option:hover {
  background-color: #f0f2f5;
  border-top-left-radius: 1px;
  border-top-right-radius: 1px;
  border-bottom-right-radius: 1px;
  border-bottom-left-radius: 1px;
}  
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" />
<div class="header">
  <div class="header__left">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/600px-Free_logo.svg.png" />

  </div>
  <div class="header__center">
    <div class="header__option active">
      <i class="fas fa-home"></i>
    </div>
    <div class="header__option">
      <i class="fas fa-users"></i>
    </div>
    <div class="header__option">
      <i class="fas fa-video"></i>
    </div>
  </div>
  <div class="header__right">
    <div class="header__info">
      <i class="fas fa-user-circle fa-lg"></i>
      <span class="header__info__name">Aakash</span>
    </div>
  </div>
</div>

Как можно подчеркнуть значок с точной шириной, которая берется при наведении курсора мыши на значки?

Комментарии:

1. вам нужно применить границу к родительскому элементу значка .header__option.active { border-bottom: 1px solid red; border-bottom-width: 3px; }

2. Затем просто удалите padding из .header элемента и добавьте еще height на .header__option элементе.

3. можете ли вы написать это как ответ?

Ответ №1:

Вам нужно применить границу к родительскому элементу значка

 * {
  margin: 0;
  padding: 0;
}

.header {
  display: flex;
  justify-content: space-between;
  padding: 15px 20px 0px 20px; /* was padding: 15px 20px */
  position: sticky;
  background-color: white;
  z-index: 100;
  top: 0;
  box-shadow: 0px 5px 8px -9px rgba(0, 0, 0, 75);
}
/* added below four lines for image centering */
.header__left {
    display: flex;
    align-items: center;
}

.header__left>img {
  height: 40px;
}

.header__center {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.header__option {
  display: flex;
  align-items: center;
  padding: 0 2vw;
  cursor: pointer;
  height: 52px;
}

.header__right {
  display: flex;
}

.header__info {
  display: flex;
  align-items: center;
  padding-right: 12px;
}

.header__info>span {
  margin-left: 10px;
}
/* added below four lines for bottom border on active link */
.header__option.active {
  border-bottom: 1px solid red;
  border-bottom-width: 3px;
}

.header__option.active>i {
  color: #1877f2;
  /* removed border-bottom, border-bottom-width and bottom rules */
}

.header__option:hover {
  background-color: #f0f2f5;
  border-top-left-radius: 1px;
  border-top-right-radius: 1px;
  border-bottom-right-radius: 1px;
  border-bottom-left-radius: 1px;
}  
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8 NE6FZ LOAZKjy KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9 fkDaog==" crossorigin="anonymous" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" />
<div class="header">
  <div class="header__left">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/600px-Free_logo.svg.png" />

  </div>
  <div class="header__center d-none d-xl-flex d-md-flex">
    <div class="header__option active">
      <i class="fas fa-home"></i>
    </div>
    <div class="header__option">
      <i class="fas fa-users"></i>
    </div>
    <div class="header__option">
      <i class="fas fa-video"></i>
    </div>
  </div>
  <div class="header__right">
    <div class="header__info d-none d-xl-flex">
      <i class="fas fa-user-circle fa-lg"></i>
      <span class="header__info__name">Aakash</span>
    </div>
  </div>
</div>

Комментарии:

1. @aakash Я также отцентрировал изображение, потому что оно увеличилось, когда мы удалили padding-top это 0

2. можете ли вы прокомментировать css, что вы добавили и что удалили?

3. конечно, комментарии добавлены.

Ответ №2:

Лучше использовать псевдоэлементы (::after amp; ::before) для активных состояний и для подчеркивания.

 .header__option{
position: relative;
}
.header__option.active::after{
content:'';
position: absolute;
bottom: -10px; (set it accordingly)
left: 0;
width: 100%;
height: 1px;
background: red;
}

Ответ №3:

 * {
  margin: 0;
  padding: 0;
}

.header {
  display: flex;
  justify-content: space-between;
  padding: 15px 20px 0;
  position: sticky;
  background-color: white;
  z-index: 100;
  top: 0;
  box-shadow: 0px 5px 8px -9px rgba(0, 0, 0, 75);
}

.header__left>img {
  height: 40px;
}

.header__center {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.header__option {
  display: flex;
  align-items: center;
  padding: 0 2vw;
  cursor: pointer;
  height: 52px;
}

.header__right {
  display: flex;
}

.header__info {
  display: flex;
  align-items: center;
  padding-right: 12px;
}

.header__info>span {
  margin-left: 10px;
}

.header__option.active {
  color: #1877f2;
  border-bottom: 1px solid red;
  border-bottom-width: 3px;
}

.header__option:hover {
  background-color: #f0f2f5;
  border-top-left-radius: 1px;
  border-top-right-radius: 1px;
  border-bottom-right-radius: 1px;
  border-bottom-left-radius: 1px;
}  
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8 NE6FZ LOAZKjy KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9 fkDaog==" crossorigin="anonymous" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" />
<div class="header">
  <div class="header__left">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/600px-Free_logo.svg.png" />

  </div>
  <div class="header__center d-none d-xl-flex d-md-flex">
    <div class="header__option active">
      <i class="fas fa-home"></i>
    </div>
    <div class="header__option">
      <i class="fas fa-users"></i>
    </div>
    <div class="header__option">
      <i class="fas fa-video"></i>
    </div>
  </div>
  <div class="header__right">
    <div class="header__info d-none d-xl-flex">
      <i class="fas fa-user-circle fa-lg"></i>
      <span class="header__info__name">Aakash</span>
    </div>
  </div>
</div>

Комментарии:

1. что вы добавили.. что вы удаляете? можете ли вы объяснить?

2. Я изменил заполнение заголовка с padding: 15px 20px на padding: 15px 20px 0 , а также изменил .header__option.active>i на .header__option.active

Ответ №4:

Вот рабочий пример:

 * {
  margin: 0;
  padding: 0;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  background-color: white;
  z-index: 100;
  top: 0;
  box-shadow: 0px 5px 8px -9px rgba(0, 0, 0, 75);
  padding-left: 15px;
  padding-right: 15px;
}

.header__left>img {
  height: 40px;
}

.header__left .header__option, .header__right .header__option, .header__center .header__option {
  height: 60px;
  min-width: 60px;
}

.header__center {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.header__option {
  display: flex;
  align-items: center;
  padding: 0 2vw;
  cursor: pointer;
  justify-content: center;
}

.header__right {
  display: flex;
}

.header__info {
  display: flex;
  align-items: center;
  padding-right: 12px;
}

.header__info>span {
  margin-left: 10px;
}

.header__option.active, .header__option.active:hover {
  color: #1877f2;
  border-bottom: 1px solid red;
  border-bottom-width: 3px;
}

.header__option:hover {
  background-color: #f0f2f5;
  border-bottom: 1px solid #dedede;
  border-bottom-width: 3px;
}  
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8 NE6FZ LOAZKjy KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9 fkDaog==" crossorigin="anonymous" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" />
<div class="header">
  <div class="header__left">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/600px-Free_logo.svg.png" />

  </div>
  <div class="header__center">
    <div class="header__option active">
      <i class="fas fa-home"></i>
    </div>
    <div class="header__option">
      <i class="fas fa-users"></i>
    </div>
    <div class="header__option">
      <i class="fas fa-video"></i>
    </div>
  </div>
  <div class="header__right">
    <div class="header__info d-none d-xl-flex">
      <i class="fas fa-user-circle fa-lg"></i>
      <span class="header__info__name">Aakash</span>
    </div>
  </div>
</div>

Комментарии:

1. почему граница скрывается при наведении курсора мыши? можно ли удалить наведение, если класс активен?

2. О, просто нужно изменить цвет при наведении курсора на red при наведении курсора `заголовок__option.active: hover». позвольте мне обновить пример.

3. решение для подчеркивания — добавить только ширину …. верно?

4. @aakash Нет, я внес некоторые изменения в ваш стиль, чтобы сделать это, я удалил отступы из .header класса и присвоил фиксированному классу height amp; min-width to .header__option значение полной высоты, чтобы граница всегда была внизу заголовка.

5. @aakash я добавил min-width , чтобы он выглядел немного шире.