I have a menu from a list. On small widths I want the border-bottom to use the full width:

[![enter image description here](https://i.stack.imgur.com/zdZL9.png)](https://i.stack.imgur.com/zdZL9.png)

HTML:

```
<div id="wrapper">
    <ul id="menu">
        <li class="active"><a href="#">Item 1</a></li>
        <li><a href="#">Item 2 with Text</a></li>
        <li><a href="#">Item 3 with more Text</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5 with Text</a></li>
    </ul>
</div>

```

CSS:

```
#menu li {
    display: inline-block;
}
#menu li:not(.active) {
    border-bottom: 2px solid #ccc;
}
#menu li.active {
    border-bottom: 2px solid red;
}
#menu li a {
    padding: .5em 1em;
    box-sizing: border-box;
    display: block;
}

```

Test: **[Fiddle](http://jsfiddle.net/xrz39p4L/)**