I have three list items with a specific color to each list item and they are floated to left. The ul in container. I need the last child in ul to expand to the remaining width of browser in all sizes.

```css
.my-list li:first-child:before{
        content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  right: 100%;
  top: 0;
  background-color: inherit;
}
.my-list li:last-child:after{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  left: 100%;
  top: 0;
  background-color: inherit;
}
```

```html
<ul class="my-list">
  <li><a href="#">first list item</a></li>
  <li><a href="#">Second list item</a></li>
  <li><a href="#">Third list item</a></li>
</ul>

```