CODEWITHSUNDEEP
htmlcss
jessica-townsend
jessica-townsend

Reputation: 3

Small blue "underline" beneath divs on hover - where is this coming from?

I'm making a scroll down arrow, and I used two rotated divs to make the chevron shape. For some reason, when I hover over its containing div, a small blue underline appears beneath the chevron shape.

I tried text-decoration: none for those elements and their parents; I didn't really expect that to work. I'm not sure what's causing it from the code I have. Does anyone have any ideas?

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>

Upvotes: 0

Views: 62

Answers (2)

HAPPY SINGH
HAPPY SINGH

Reputation: 586

Its coming from <a>and <a> default css applied text-decoration:underline;

please add the code below.

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

Upvotes: 1

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

is coming to a tag, Add This CSS

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

https://jsfiddle.net/L93srbdf/

Upvotes: 0

Related Questions