html - Border-bottom 1px too long on both sides CSS

Question

What I am doing: On hover of a button I am addding a border-bottom of 5px.

JS FIDDLE: http://jsfiddle.net/mUCNB/

Problem:

The problem is the border bottom extends 1px too far on both the left and right side.

Question:

Does anyone know how to fix this?

Relevant Code:

#main-nav li a {
display: block;
padding-top: 15px;
text-align: center;
height: 35px;
font-size: 18px;
line-height: 18px;
color: #fff;
text-decoration: none;
background-color: #00a0c8;
}

#main-nav li a:first-child, #main-nav li a:nth-child(2) {
width: 224px;
border-right: 1px solid #ffffff;
}

#main-nav li a:nth-child(3) {
width: 225px;
}

#main-nav li a:last-child {
width: 224px;
border-left: 1px solid #ffffff;
}

#main-nav  a:hover {
height: 30px;
border-bottom: 5px solid #0BC6F5;
}

Answer 1

由于 CSS 边框在边缘有“斜接”，您会注意到这种现象。为了解决这个问题，我创建了规则来突出显示悬停的liBEHIND a。这会产生您在底部获得干净边框的效果。您也可以在元素之间保留那些白色分隔符。

分叉的小提琴

CSS

* {
  margin: 0px;
  padding: 0px;
  outline: none;
}

#header {
  background-color: #00a0c8;
  min-height: 118px;
}

#headerContent {
  width: 980px;
  min-height: 118px;
  margin: 0 auto;
  background-color: #00a0c8;
}

nav {
  width: 980px;
  margin: 0 auto;
}

nav li {
  border-left: 1px solid #fff; /* Added border to nav li */
  display: block;
  float: left;
  height: 50px; /* Give it height */
}

#main-nav li:hover {
  background: #0BC6F5; /* Give background color to li on hover */
}

nav li:first-child {
  border-left: none;
}

#main-nav li a {
  display: block;
  padding-top: 15px;
  text-align: center;
  height: 35px;
  font-size: 18px;
  line-height: 18px;
  color: #fff;
  text-decoration: none;
  background-color: #00a0c8;
}

#main-nav li a:first-child, #main-nav li a:nth-child(2) {
  width: 224px;
}

#main-nav li a:nth-child(3) {
  width: 225px;
}

#main-nav li a:last-child {
  width: 224px;
}

#main-nav li a:hover {
  height: 30px;
}

希望有帮助。

Answer 2

还有一个巧妙的技巧是只使用 box-shadow 来应用冲突的边框：

#main-nav  a:hover {
height: 30px;
box-shadow:0 5px 0 -1px #0BC6F5;
}

如果您只是替换当前的悬停选择器，则此方法有效！

如果你想先试试，这里有另一个小提琴：http: //jsfiddle.net/4zzMA/

Answer 3

您可以通过从以下内容中删除左边框和右边框样式来解决此问题：

更新的CSS：

#main-nav li a:first-child, #main-nav li a:nth-child(2) {
width: 224px;
}

#main-nav li a:last-child {
width: 224px;
}

更新的小提琴