不知道如何从css中的图像中删除下划线

Question

我正在制作的网站在超链接中的某些文本旁边有一张图片。

图像带有下划线，文本也带有下划线。我希望图像不带下划线。

a {
   -moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
   -webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
   -ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
   transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
   border-bottom: dotted 1px;
   color: #0066cc;
   text-decoration: none;
 }
 a:hover {
   border-bottom-color: transparent !important;
   color: #0066cc !important;
   text-decoration: none;
 }
 img {
   outline: none !important;
   text-decoration: none !important;
   border-bottom-color: transparent !important;
   border-bottom: none;
   outline-width: 0px;
 }

<a href="domain.com"><img src="pic.gif">check this out></a>

没有用。

如果您将鼠标悬停在图像上，下划线会消失，但我希望它永远不会出现。

Answer 1

如果您只想删除图片下方的线条，请使用以下代码：-

CSS :-

a 
{
    -moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
    -webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;

    color: #0066cc;
    text-decoration: none;
}
a span{
border-bottom: dotted 1px;
}
a span:hover {
    border-bottom-color: transparent !important;
    color: #0066cc !important;
    text-decoration: none;
}

HTML :-

<a href="domain.com"><img src="pic.gif"><span>check this out></span></a>

如果要从整个图像和文本中删除行，请使用以下代码：-

CSS :-

a 
    {
        -moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
        -webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
        -ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;

        color: #0066cc;
        text-decoration: none;
    }
a span{
border-bottom: dotted 0px;
}
a span:hover {
    border-bottom-color: transparent !important;
    color: #0066cc !important;
    text-decoration: none;
}

HTML :-

<a href="domain.com"><img src="pic.gif"><span>check this out></span></a>

Answer 2

将文本放入<span></span>，从链接中删除下划线并仅为该范围设置下划线。它应该可以工作。