CSS3 arrow hyperlink

Question

Trying to make arrow link with CSS. This one works in Firefox, but has a problems in IE and webkit-based browsers with arrowhead\'s position. Double div used for centering l

Answer 1

Try this code -- >
HTML :

content
Link
content

CSS :

a{
    padding:10px;
    background:#2ecc71;
    display:inline-block;
    position:relative;
}
a:hover{
    background:orange;
}
a:hover:after{
   border-left: 20px solid orange;
}
a:after {
display: inline-block;
content: "";
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #2ecc71;
position: absolute;
right:-20px;
top:0;

}  

JS FIDDLE DEMO

The border width and the right and top positions can be tweaked according to your needs