1

Пытаюсь сделать плавное подчеркивание и увеличение текста, при наведении. Однако после того, как я убираю курсор с элемента, у меня от подчеркивания остается вот такая полоса. В чем могла быть проблема?

.downloads>a {
  font-size: 1.3rem;
  text-align: center;
  display: block;
  position: relative;
  text-decoration: none;
  color: #DC352F;
  -webkit-transition: all .2s ease-in-out, transform .2s ease-in-out;
  -moz-transition: all .2s ease-in-out, transform .2s ease-in-out;
  -ms-transition: all .2s ease-in-out, transform .2s ease-in-out;
}

.downloads>a:hover {
  font-size: 1.5rem;
}

.downloads>a:after {
  display: block;
  height: 3px;
  background: #DC352F;
  position: absolute;
  border-radius: 2px;
  content: " ";
  left: 4px;
  right: 4px;
  opacity: 0;
  bottom: -6px;
  -webkit-transition: all .2s ease-in-out, transform .2s ease-in-out;
  -moz-transition: all .2s ease-in-out, transform .2s ease-in-out;
  -ms-transition: all .2s ease-in-out, transform .2s ease-in-out;
  transform-origin: bottom;
  transform: scaleX(0) scaleY(0);
}

.downloads>a:hover:after {
  opacity: 1;
  transform: scaleX(0.8) scaleY(1.0);
}
<div class="downloads">
  <a href="#" style="text-decoration: none;">
    <img class="dow_img" src="/images/mac.png">
    <p>Скачать <b>Linux</b></p>
  </a>
</div>
<!--downloads-->

ff

1
  • Какой браузер и ОС? MacOS Chrome 92 полосы не видно.
    – nazarpunk
    Commented 25 июл. 2021 в 17:10

1 ответ 1

0

Попробуйте добавить в .downloads>a:after {

-webkit-font-smoothing: subpixel-antialiased;
  backface-visibility: hidden;

.downloads>a {
  font-size: 1.3rem;
  text-align: center;
  display: block;
  position: relative;
  text-decoration: none;
  color: #DC352F;
  -webkit-transition: all .2s ease-in-out, transform .2s ease-in-out;
  -moz-transition: all .2s ease-in-out, transform .2s ease-in-out;
  -ms-transition: all .2s ease-in-out, transform .2s ease-in-out;
}

.downloads>a:hover {
  font-size: 1.5rem;
}

.downloads>a:after {
  display: block;
  height: 3px;
  background: #DC352F;
  position: absolute;
  border-radius: 2px;
  content: " ";
  left: 4px;
  right: 4px;
  opacity: 0;
  bottom: -6px;
  -webkit-transition: all .2s ease-in-out, transform .2s ease-in-out;
  -moz-transition: all .2s ease-in-out, transform .2s ease-in-out;
  -ms-transition: all .2s ease-in-out, transform .2s ease-in-out;
  transform-origin: bottom;
  transform: scaleX(0) scaleY(0);
  -webkit-font-smoothing: subpixel-antialiased;
  backface-visibility: hidden;
}

.downloads>a:hover:after {
  opacity: 1;
  transform: scaleX(0.8) scaleY(1.0);
}
<div class="downloads">
  <a href="#" style="text-decoration: none;">
    <img class="dow_img" src="/images/mac.png">
    <p>Скачать <b>Linux</b></p>
  </a>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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