我已经创建了一个向右的箭头。
我该如何翻转它以创建第二个向左的箭头?
a {
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
padding: 10px 15px 10px 10px;
position: relative;
text-decoration: none;
}
a:before, a:after {
border-right: 2px solid;
content: '';
display: block;
height: 8px;
margin-top: -6px;
position: absolute;
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
right: 10px;
top: 50%;
width: 0;
}
a:after {
margin-top: -1px;
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
a:hover, a:focus,
a:hover:before, a:hover:after,
a:focus:before, a:focus:after {
color: #000;
}
<a class="arrow"></a>