html - 호버링시 div 아래의 작은 파란색 "밑줄" - 이것은 어디에서 오는가?

아래로 스크롤 화살표를 만들고 있는데 두 개의 회전 된 div를 사용하여 갈매기 모양을 만듭니다. 어떤 이유로 든 포함 div 위에 마우스를 올리면 쉐브론 모양 아래에 작은 파란색 밑줄이 나타납니다.

텍스트 장식을 시도했습니다 : 해당 요소와 부모에게는 해당되지 않습니다. 나는 그것이 효과가 있다고 기대하지 않았습니다. 내가 가지고있는 코드에서 무엇이 원인인지 잘 모르겠습니다. 누구든지 아이디어가 있습니까?

내가 설명하고있는 그림이 있습니다. 화살표 끝 아래에 작은 파란색 밑줄이 있습니다

<프리 클래스 = "조각 코드 - CSS 랭 CSS를 prettyprint 오버라이드 (override)"> #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>