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>