さぁ!検索しよう!

グローバルメニューの各項目を、リンクのクリック範囲を保ちつつ、各項目内の文字と同じ高さの縦線で仕切る2つの方法です。

1つ目の方法は、spanで更に文字を囲い、spanにボーダーを指定する方法です。

DEMO

HTML

<nav class="nav">
  <ul>
    <li><a href="#1"><span>HOME</span></a></li>
    <li><a href="#2"><span>ABOUT</span></a></li>
    <li><a href="#3"><span>CONTACT</span></a></li>
    <li><a href="#4"><span>PORTFOLIO</span></a></li>
    <li><a href="#5"><span>CATEGORY</span></a></li>
  </ul>
</nav>

CSS

@charset "UTF-8";
* {
  box-sizing: border-box;
}

body {
  color: #fff;
  font-family: メイリオ;
  margin: 0;
  padding: 0;
}

.nav {
  background: #F27398;
  box-shadow: 0 2px 5px #ccc;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
}
.nav ul {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav ul li {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
}
.nav ul li a {
  color: #fff;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  text-decoration: none;
  padding: 20px 0;
}
.nav ul li a span {
  border-left: 1px solid #fff;
  padding: 0 20px;
}
.nav ul li:last-child span {
  border-right: 1px solid #fff;
}

CSSのポイントは以下の通りです。

paddingの指定を工夫

apaddingは上下のみを、spanは左右のみを指定しています。これによってリンク範囲を要素いっぱいに保ちつつ文字とボーダーが同じ高さになります。

.nav ul li a {
  padding: 20px 0;
}
.nav ul li a span {
  padding: 0 20px;
}

2つ目の方法は、疑似要素にボーダーを指定する方法です。

DEMO

HTML

HTMLは1つ目のものと全く同じです。

CSS

一つ目と異なる箇所は.nav ul li a以下となります。

.nav ul li a {
  color: #fff;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  text-decoration: none;
  padding: 20px;
  position: relative;
}
.nav ul li a:before {
  border-left: 1px solid #fff;
  content: '';
  height: 1em;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.nav ul li:last-child a:after {
  border-left: 1px solid #fff;
  content: '';
  height: 1em;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

ポイントは以下の通りです。

文字サイズと同じ高さの疑似要素を絶対配置

文字サイズと同じ高さの疑似要素を、a要素の左側の縦中央に絶対配置しています。ですから疑似要素にborder-leftを指定することで、リンク範囲を要素いっぱいに保ちつつ文字とボーダーが同じ高さになります。

.nav ul li a:before {
  border-left: 1px solid #fff;
  content: '';
  height: 1em;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

以上で、グローバルメニューの各項目を、リンク範囲を要素いっぱいに保ちつつ文字と同じ高さにしたボーダーで仕切る2つの方法を終わります。