html - CSS - Triangle down -
this question has answer here:
- create down arrow pointer 3 answers
how create arrow down (triangle) when hovering on link?
something result tab on codepen, see here
i trying create triangle following the tutorial above, no luck
a{ background: red; float: left; width: 30%; padding: 5px; display block } a:hover {background: green;}
i'm not sure mean, 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:
Comments
Post a Comment