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 link content. Any suggestions?

content
<a href="#" class="readmore">
    <div>
    <div>
        link content
    </div>
</div>
    </a> 
    content

CSS

.readmore {
    text-decoration:none;
}
.readmore > div {
    display: table;
    height: 30px;
    //width: 100%;
    background: #008a00;
    transition: background 0.2s;
}
.readmore > div:hover {
    background:orange;
}
.readmore > div::after {
    content:"";
    display:inline;
    position:absolute;
    border: 15px solid;
    margin-top:-15px;
    border-color:transparent transparent transparent #008a00;
    transition: border-left-color 0.2s;
}
.readmore > div::before {
    content:"";
    display:inline-block;
    width:6px;
    position: static;
    background:#008a00;
    transition: background 0.2s;
}
.readmore > div:hover::after {
    border-left-color:orange;
}
.readmore > div > div {
    display: table-cell;
    //text-align: center;
    vertical-align: middle;
    color:white;
}

Answer 1

You should set the top explicitly to 0 for the :after element, and also remember to set the position:relative for the div element so that the absolute positioning works as expected:

.readmore > div::after {
   ...
   top:0;
}

.readmore > div {
   ...
   position:relative;
}

Fiddle

NOTE: The negative margin-top should be removed. The cause of your problem is you use negative margin-top (maybe by trial and error until it looks OK in FF), but the position also depends on the top and left. The default values of these properties are implemented differently by different browsers, the only solution to set it in order is explicitly set the top, left and remember the rule to determine the containing block for the absolute positioned element. (the nearest ancestor which has position as absolute or relative).

Answer 2

Try this code -- >
HTML :

<div>content</div>
<a href="#">Link</a>
<div>content</div>

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