フッターリンクなどで縦棒で区切ってリンクとかを羅列することって、結構あると思うんです。
的な。
そんなときいちいちクラスを振ったりJSで数えたりしなくてもスマートにCSSで表現する方法のメモ。ie7以上でー。
[html]
<div class="footer">
<div class="links">
<a href="#">nav1</a><a href="#">nav2</a><a href="#">nav3</a><a href="#">nav4</a><br>
<a href="#">nav5</a><a href="#">nav6</a>
</div>
</div>
[/html]
[css]
.footer .links {
margin-bottom: 10px;
padding-bottom: 10px;
}
.footer .links a {
display: inline-block;
border-right: 1px solid #CCC;
padding: 0 10px;
margin: 5px 0;
}
.footer .links a:first-child,
.footer .links br + a {
border-left: 1px solid #CCC;
}
[/css]