nicht sicher, wie die Unterstreichung von Bild in CSS entfernen

Question

Die Website, die ich mache, hat ein Bild neben einem Text in einem Hyperlink.

Das Bild ist unterstrichen und so ist der Text. Ich möchte, dass das Bild nicht unterstrichen wird.

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>

Es hat nicht funktioniert.

Die Unterstreichung verschwindet, wenn Sie den Mauszeiger über das Bild bewegen, aber ich möchte, dass es nicht dort ist.

Answer 1

Wenn Sie Linie nur unter Bild entfernen möchten, verwenden Sie bitte folgenden Code: -

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> 

Wenn Sie möchten, Um die Linie vom ganzen Bild und Text zu entfernen, benutzen Sie bitte folgenden Code: -

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

Setzen Sie den Text in das <span></span>, entfernen Sie unterstrichen von Link und stellen Sie unterstreichen nur für diesen Zeitraum. Es sollte funktionieren.