图像下方和上方的小蓝线

Question

我在两张图片的下方和上方都有这些小蓝线。我试着申请 style="border: 0;" 但它没有用。还尝试在 css 文件中应用 css border:0px, outline:0px。但是还是不行。

我假设这些是链接或类似的东西。谁能帮我去掉这些小蓝线？

.kategorien1{
    margin-bottom: 50px;
    margin-left: 75px;
    margin-right: -35px;
    box-shadow: 0px 0px 3px 0px black;
    transition-property: all;
    transition-duration: 400ms;
}
.kategorien2{
    margin-bottom: 80px;
    margin-left: 300px;
    box-shadow: 0px 0px 3px 0px black;
    transition-property: all;
    transition-duration: 400ms;
}

<!DOCTYPE html>
<html= lang=de>
<head>
<link href="style.css" rel= "stylesheet" type="text/css">
<meta charset="utf-8">
<title>Handgefertigte Armbänder online shoppen bei handform</title>    
</head>


<body>
<!--BILDER UNTERKATEGORIEN-->
<a href="damem-lederimitat.html">
<img class="kategorien1" src="Lederimitat.jpeg" width="40%" style="border: 0;">
</a>    
<a href="damem-armreifen.html">
<img class="kategorien1" src="armreifen.jpeg" width="40%" style="border: 0;">
</a>  
<a href="damem-perlenarmbänder.html">
<img class="kategorien1" src="Perlenarmb%C3%A4nder.jpeg" width="40%" style="border: 0;">
</a>   
<a href="damem-verschiedene-armbänder.html">
<img class="kategorien1" src="verschiedene_b%C3%A4nder.jpeg" width="40%" style="border: 0;">
</a>
<a href="damem-verschiedene-armbänder.html">
<img class="kategorien2" src="M%C3%A4nnerarmb%C3%A4nder.jpeg" width="40%" style="border: 0;">
</a>

</body>
    

</html>

Answer 1

它来自 a 标签，如超链接的蓝色下划线所示。将此添加到您的 css 以删除它们：

a {
    text-decoration: none;
}

为了完全覆盖你自己，将它应用于 a 标签的两种状态可能是个好主意（你知道点击后它是如何变成紫色的吗？），所以试试这个 css:

a, a:visited {
    text-decoration: none;
}

但这样做的目的是从您页面上的所有链接中删除下划线。因此，创建一个 class 并将其添加到您不想加下划线的链接可能是个好主意，如下所示：

a.no-underline,
a.no-underline:visited {
  text-decoration: none;
}

<a class="no-underline" href="#">This isn't underlined</a>
<a href="#">But this is!</a>

Answer 2

您的 a 标签上有文字修饰。

a{text-decoration: none;}

这将摆脱它。只需使用更好的选择器，因为上面的选择器将删除链接的所有下划线。

Answer 3

当您使用图像作为链接时，浏览器默认应用 css。要删除它，您应该删除 <a> 的所有默认属性，例如：

a{
text-decoration:none;
}

或者您可以为 <a> 分配单独的 class，然后定义属性..！

Answer 4

只需使用以下CSS即可

img, a, a:focus {
    outline: none;
}
a, a:hover {
    text-decoration: none;
}

图像下方和上方的小蓝线

Small blue lines under and over an image

html

css

lines

line

hyperlink