メニューの項目毎にborderで区切り線を入れる

Ads

Result


シンプルな線区切り。not疑似セレクタを使って1行で書ける

css

nav li:not(:last-child) {
/*borderで項目ごとに区切り線を入れ、最後の項目のみ無くす*/
  border-right: 1px solid #666;
}

html

<nav>
  <ul>
    <li><a href="#">menu01</a></li>
    <li><a href="#">menu02</a></li>
    <li><a href="#">menu03</a></li>
    <li><a href="#">menu04</a></li>
  </ul>
</nav>

via

CSS Protips