html
qiita.html
<ul class="cursor">
<li><a href="#">リスト01</a></li>
<li><a href="#">リスト02</a></li>
<li><a href="#">リスト03</a></li>
<li><a href="#">リスト04</a></li>
</ul>
css
qiita.css
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* 基本プロパティ */
ul.cursor {
margin: 0;
padding: 0;
}
ul.cursor li {
width: 100%;
margin: 0;
padding: 0;
list-style-type: none;
border-bottom: 1px solid #D5D5D5;
background: #FFF;
}
ul.cursor li:nth-child(odd) {
background: #F6F6F6;
}
ul.cursor li a {
position: relative;
margin: 0;
padding: 10px 30px 10px 10px;
color: #333;
display: block;
overflow: hidden;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
}
/* アイコン */
ul.cursor li a:before,
ul.cursor li a:after {
content: "";
position: absolute;
top: 50%;
}
ul.cursor li a:before {
right: 11px;
width: 18px;
height: 18px;
margin: -9px 0 0;
background: #999;
-webkit-border-radius: 20px;
border-radius: 20px;
}
ul.cursor li a:after {
right: 17px;
width: 5px;
height: 5px;
margin-top: -4px;
border-top: solid 3px #FFF;
border-right: solid 3px #FFF;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}