スマホサイトのフッターメニューの矢印のCSS

スマホサイトでよくみかける「＞」矢印メニュー。
この矢印の装飾はbeforeタグまたはafterタグでアイコン指定し、liに対してposition指定します。

 

<ul id=”list”>
<li><a href=”#”>これはダミー</a></li>
<li><a href=”#”>これはダミー</a></li>
<li><a href=”#”>これはダミー</a></li>
</ul>

#list li a {
display: block;
position: relative;
}

#list li a:before {
content: “”;
margin-top: auto;
margin-bottom: auto;
display: block;
position: absolute;
top: 0;
right: 10px;
bottom: 0;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
width: 10px;
height: 10px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);}