1

HTML:

<a class="btn btn-phone" href="#"><span>+11 235 813 2134</span></a>

SASS:

.btn
  padding: 10px 34px
  display: inline-block
  color: $dark
  border-radius: 10px
  text-decoration: none
  &-phone
    background-color: $active-color
    &:hover
      background-color: lighten($active-color, 4%)
    span
      border-bottom: 1px dashed $dark
      &:hover
        border-bottom: none

Подскажите пожалуйста, как правильно сделать верстку, чтобы при наведение на кнопку, подчеркивание у текста пропадало?
Сейчас подчеркивание пропадает только, если навести на элемент <span> и он занимает не все место кнопки:

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

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

1 ответ 1

3

CSS:

.btn {
  padding: 10px;
  background: yellow;
  text-decoration: none;
}

.btn span {
  border-bottom: 1px dashed black
}

.btn:hover span{
  border-bottom: none;
}
<a class="btn btn-phone" href="#"><span>+11 235 813 2134</span></a>

SASS:

.btn
     padding: 10px
     background: yellow
     text-decoration: none
     span
          border-bottom: 1px dashed black
     &:hover span
          border-bottom: none

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.