NorthernLights NorthernLights - 6 months ago 41
HTML Question

CSS - Triangle down

How do I create an arrow down (triangle) when hovering over a link?

something like the result tab on CodePen, see here

I was trying to create the triangle by following the the tutorial above, but no luck

a{
background: red;
float: left;
width: 30%;
padding: 5px;
display block
}

a:hover {background: green;}

Answer

I'm not sure what you mean, but this could be the answer:

css:

.arrow_down_on_hover{
  position: relative;
}
.arrow_down_on_hover:before{
  content: "";
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  display: none;
  border-top: 20px solid #f00;
  position: absolute;
  right: 50%;
  margin-right: -10px;
  bottom: -20px;
}
.arrow_down_on_hover:hover:before{
  display: block;
}

html:

<a class="arrow_down_on_hover" href="#!">hover me</a>

example:

http://codepen.io/eboye/pen/zBYzav