html - CSS - Triangle down -


this question has answer here:

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:

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


Comments

Popular posts from this blog

ios - RestKit 0.20 — CoreData: error: Failed to call designated initializer on NSManagedObject class (again) -

laravel - PDOException in Connector.php line 55: SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost' (using password: YES) -

java - Digest auth with Spring Security using javaconfig -