画像を使わずに矢印を作る

スマートフォンサイトでよくある、右側に矢印があるリストを画像を使わずに作った。

HTML

       <ul class="list">
            <li><a href="">リスト01</a></li>
            <li><a href="">リスト02</a></li>
            <li><a href="">リスト03</a></li>
            <li><a href="">リスト04</a></li>
            <li><a href="">リスト05</a></li>
        </ul>

SCSS

 .list{

        li{
            list-style: none;
            font-size: 12px;

            a{
                position: relative;
                display: block;
                margin-bottom: -1px;
                height: 30px;
                border: 1px solid #000;
                background-color: rgba(#000,0.8);
                color: #fff;
                text-align: left;
                text-decoration: none;
                text-indent: 10px;
                line-height: 2.8;

                &:before{
                    position: absolute;
                    top: 13px;
                    right: 10px;
                    display: block;
                    width: 6px;
                    height: 1px;
                    background: #fff;
                    content: "";
                    -webkit-transform: rotate(45deg);
                    transform: rotate(45deg);
                }

                &:after{
                    position: absolute;
                    top: 17px;
                    right: 10px;
                    display: block;
                    width: 6px;
                    height: 1px;
                    background: #fff;
                    content: "";
                    -webkit-transform: rotate(135deg);
                    transform: rotate(135deg);
                }
            }
        }
    }

実際の表示はこんな感じ。

※Sassのシンタックスハイライトってまだ対応してないんですね。