Использование CSS-селектора :after для заполнения пробела?

На этой страницея хочу, чтобы все пространство справа от навигация заполнена белым цветом.

Итак, я получил белый блок шириной 5 пикселей с помощью селектора CSS :after и надеюсь, что есть способ подогнать его под доступную ширину, хотя я открыт для других предложений!:

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

Вот упрощенный HTML-код. :


И весь соответствующий 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;
}

Спасибо, что нашли время, чтобы проверить мой вопрос!

Кэролайн

7
задан Caroline Elisa 12 June 2012 в 21:00
поделиться