NorthernLights NorthernLights - 11 months ago 56
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

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

a:hover {background: green;}


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


  position: relative;
  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;
  display: block;


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