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;}
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:
The code below it is just by following the tutorial you linked in your question,
but since you are using a link a you have to make it as block level by setting it display:block due to be an inline element
a {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid transparent;
display:block
}
a:hover {
border-top: 20px solid green
}<a href="">Hover me</a>If this is just a matter of show/hide the triangle when hovering some link, a better approach would be using the pseudo elements ::before/::after along with unicode down arrow symbol
a:hover::after {
content: "\25bc";
color: green
}<a href="">Hover me</a>a:hover .arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}<a>link<div class="arrow-down"></div></a>
Maybe you can just use the arrow down symbol:
a::after {
content: '\25bc';
color: red;
}
a:hover::after {
color: green;
}<a>Hover me!</a>▼.