CSS3で実現するアローアイコン
<ul>
<li><a href="#" class="arrow">link</a></li>
<li><a href="#" class="arrow">link</a></li>
<li><a href="#" class="arrow">link</a></li>
<li><a href="#">link</a></li>
<ul>
li a.arrow {
position: relative;
&::after {
content: "";
display: block;
width: 10px;
height: 10px;
border-top: 4px solid #333;
border-right: 4px solid #333;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
right: 10px;
top: 50%;
margin-top: -7px;
}
}