Пытаюсь сделать плавное подчеркивание и увеличение текста, при наведении. Однако после того, как я убираю курсор с элемента, у меня от подчеркивания остается вот такая полоса. В чем могла быть проблема?
.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-->