Html/スマホ/リストビュー
提供: 初心者エンジニアの簡易メモ
- css3
.listview a {
margin:0;
display: block;
position: relative;
border-bottom: 1px solid #ccc;
padding: 11px 25px 11px 11px;
color: #0000ee;
font-weight: bold;
text-decoration: none;
font-size:20px;
}
.listview a:after {
display: block;
position: absolute;
top: 50%;
right: 10px;
width: 7px;
height: 7px;
margin-top: -4px;
border-top: solid 2px #7f7f7f;
border-right: solid 2px #7f7f7f;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
content: "";
}
.listview a.first {
border-top: 1px solid #ccc;
}
.listview a .exp {
color:#000;
font-size:14px;
}
/* visited */
.listview a:visited {
color:#551A8B;
}
- html
<div class="listview">
<a href="/">たいとる<span class="exp">コンテンツサマリー</span></a>
<a href="/">たいとる<span class="exp">コンテンツサマリー</span></a>
<a href="/">たいとる<span class="exp">コンテンツサマリー</span></a>
</div>
