html - 悬停时 div 下方的小蓝色 "underline"- 这是从哪里来的？

Question

我正在制作一个向下滚动的箭头，我使用了两个旋转的 div 来制作人字形。出于某种原因，当我将鼠标悬停在其包含的 div 上时，V 形下方会出现一条蓝色的小下划线。

我尝试了 text-decoration: none 用于那些元素和它们的父元素；我真的没想到这会奏效。我不确定是什么原因导致了我的代码。有人有什么想法吗？

Here's a picture of what I'm describing; there's a small blue underline beneath the tip of the arrow

#arrow-div {
    position: absolute;
    background-color: yellow;
    text-decoration: none;
    bottom: 10px;
    right: 0;
    left: 0;
}

#arrow-button { 
    width: 80px;
    height: 80px;
    margin: auto;
    transition: .3s;
    text-decoration: none;
}

#arrow-button:hover {
    transition: .5s;
    border: 4px dotted black;
    border-radius: 60px;
    text-decoration: none;
}

.arrow {
    height: 30px;
    width: 8px;
    background-color: black;
    border-radius: 2px;
    display: inline-block;
    margin-top: 25px;
    text-decoration: none;
}

#arrow-left {
    transform: rotate(-45deg);
    margin-right: 2px;
}

#arrow-right {
    transform: rotate(45deg);
    margin-left: 2px;
}

<div class="container" id="arrow-div">
    <a href="#slant-1">
       <div class="container" id="arrow-button">
          <div class="arrow" id="arrow-left"></div>
	      <div class="arrow" id="arrow-right"></div>
       </div>
    </a>
</div>

Answer 1

它来自 <a>和 <a>默认 CSS 应用 text-decoration:underline;

请添加下面的代码。

#arrow-div a {
 text-decoration: none;
}