Using :after CSS selector to fill a space?

Question

On this page I wish to have the entire space to the right of the navigation filled in white. So, I achieved 5px wide white block using the :after CSS selector, and am hoping there is a way to make it fit the available width, although I am open to other suggestions!: ``` #menu-main-menu:after { content:""; display:block; background:#fff; width:5px; height:30px; float:right; } ``` Here is the simplified HTML: ``` ``` And all the relevant 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 .curr…

Accepted Answer

You could add the `::after` pseudo selector to the `li.current-menu-item` instead of `#menu-main-menu` and add white background from that element onwards.

```
.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 */
}
```

Using :after CSS selector to fill a space?

Solution

Problem