使用：在CSS选择器之后填充空格？

在 this page我希望导航右边的整个空间都是白色的.

所以,我使用：在CSS选择器之后实现了5px宽的白色块,我希望有一种方法可以使它适合可用的宽度,尽管我对其他建议持开放态度！：

#menu-main-menu:after {
    content:"";
    display:block;
    background:#fff;
    width:5px;
    height:30px;
    float:right;
    }

这是简化的HTML：

<div class="menu"><ul id="menu-main-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Courses &#038; prices</a></li>
<li><a href="#">Activities in Rio</a></li>
<li><a href="#">Accommodation</a></li>
<li><a href="#">News</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

以及所有相关的CSS：

#primary-menu ul {
    overflow:hidden;
}
#primary-menu li {
    list-style:none;
    float:left;
}
#primary-menu a {
    color:#333;
    background: #fff;
    display:block;
}
#primary-menu .current-menu-item a,#primary-menu .current-page-parent a {
    color:#fff;
    background:none;
}
#menu-main-menu:before {
content:"";
display:block;
background:#fff;
width:20px;
height:30px;
float:left;
} 
#menu-main-menu:after {
content:"";
display:block;
background:#fff;
width:5px;
height:30px;
float:right;
}

感谢您抽出宝贵时间查看我的问题！

卡罗琳

解决方法

您可以将:: after伪选择器添加到li.current-menu-item而不是#menu-main-menu,然后从该元素添加白色背景.

.current-menu-item:after {
    background: none repeat scroll 0 0 #fff;
    content: "";
    height: 30px;
    position: absolute;
    right: -1000px;   /* these numbers are the same */
    top: 0;
    width: 1000px;    /* and need to be at least the width of the menu */
}

#primary-menu li {
    position: relative;  /* position the ::after element relative to the li */
}

#primary-menu ul {
    ....
    overflow: hidden;  /* you already have this to clear your floats */
    ....               /* but I thought I should emphasise that you need it */
}