CSSデザインノート

メニューの間に罫線（縦線）で区切りたい場合、「:before（:after)」疑似要素を使うと便利です。

(X)HTMLコード

<ul class="menu">
    <li><a href="index.html">トップ</a></li>
    <li><a href="company.html">会社情報</a></li>
    <li><a href="products.html">製品情報</a></li>
    <li><a href="recruit.html">採用情報</a></li>
    <li><a href="contact.html">お問い合わせ</a></li>
</ul>

CSSコード

.menu {
	position:relative;
	float:left;
}

.menu li:before {
    position:absolute;
    display:block;
    content:"";
    top:50%;
    right:0;
    height:12px;
    margin-top:-6px;
    border-right:1px solid #000;
}

.menu li:last-child:before {
	border-right:none;
}

「:before（:after)」疑似要素を使うと、HTMLファイルにソースコードを追加すること無く、CSSのみで罫線（縦線）を表示することが可能です。

また、罫線（縦線）の位置は、「position:absolute;」で絶対配置にすると、位置決めが楽になります。ここでは、縦方向に50%した後、罫線（縦線）の半分の高さ分、marginで上方向に表示させることで、垂直方向に中央寄せしています。