получить нижнюю границу без дать нижнее свойство в CSS, что происходит, я не могу понять,

Question

на нижней границе, как я могу удалить нижнюю границу при наведении курсора, она не удаляется CSS

.bb-custom-wrapper>nav a {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 2px;
  background: #524b96;
  /* #524b96  #1baede*/
  color: orange;
  font-size: 0;
  margin: 2px;
}

.bb-custom-wrapper>nav a:hover {
  opacity: 0.6;
}

.bb-custom-icon:before {
  font-family: 'arrows';
  /* speak: none; */
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-size: 30px;
  line-height: 40px;
  display: block;
  /* -webkit-font-smoothing: antialiased; */
}

.bb-custom-icon-first:before,
.bb-custom-icon-last:before {
  content: "\e002";
}

.bb-custom-icon-arrow-left:before,
.bb-custom-icon-arrow-right:before {
  content: "\e003";
}

.bb-custom-icon-arrow-left:before,
.bb-custom-icon-first:before {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

<nav>
  <a id="bb-nav-first" href="#" class="bb-custom-icon bb-custom-icon-first">First page</a>
  <a id="bb-nav-prev" href="#" class="bb-custom-icon bb-custom-icon-arrow-left">Previous</a>
  <a id="bb-nav-next" href="#" class="bb-custom-icon bb-custom-icon-arrow-right">Next</a>
  <a id="bb-nav-last" href="#" class="bb-custom-icon bb-custom-icon-last">Last page</a>
</nav>

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

Answer 1

Используйте text-decoration: none для вашего <a>

.bb-custom-wrapper>nav a {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 2px;
  background: #524b96;
  /* #524b96  #1baede*/
  color: orange;
  font-size: 0;
  margin: 2px;
}

.bb-custom-wrapper>nav a:hover {
  opacity: 0.6;
}

.bb-custom-icon:before {
  font-family: 'arrows';
  /* speak: none; */
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-size: 30px;
  line-height: 40px;
  display: block;
  /* -webkit-font-smoothing: antialiased; */
}

.bb-custom-icon-first:before,
.bb-custom-icon-last:before {
  content: "\e002";
}

.bb-custom-icon-arrow-left:before,
.bb-custom-icon-arrow-right:before {
  content: "\e003";
}

.bb-custom-icon-arrow-left:before,
.bb-custom-icon-first:before {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

a,
a:hover {
  text-decoration: none;
}

<nav>
  <a id="bb-nav-first" href="#" class="bb-custom-icon bb-custom-icon-first">First page</a>
  <a id="bb-nav-prev" href="#" class="bb-custom-icon bb-custom-icon-arrow-left">Previous</a>
  <a id="bb-nav-next" href="#" class="bb-custom-icon bb-custom-icon-arrow-right">Next</a>
  <a id="bb-nav-last" href="#" class="bb-custom-icon bb-custom-icon-last">Last page</a>
</nav>

Я добавил a,a:hover {text-decoration: none;} к вашему коду, который, похоже, решает вашу ошибку.

Answer 2

Это не граница, вы можете сказать, потому что она не распространяется до самого конца элемента и не имеет закругленных углов от border-radius.

Попробуйте добавить text-decoration: none к этим ссылкам как правило :hover.