悬停div下方的蓝色小“下划线”-这是哪里来的？

Question

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

我尝试了文本装饰：这些元素及其父元素均没有。我真的没想到它能奏效。我不确定是什么原因导致了我的代码。有人有什么想法吗？

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;
}

Answer 2

即将加入a tag，添加此CSS

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

https://jsfiddle.net/L93srbdf/