Question

This is what I have created so far. I want to increase the height of the first li item, so that it covers the bottom border of its ul.

In my app I want to create the “selected” effect using this approach. Is this possible without JS?

CSS

ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul {
    border: 5px solid #999;
    font-size: 0;
}

li {
    padding: 25px;
    font-size: 1rem;
    border: 5px solid orange;
    display: inline-block;
}

HTML

<ul>
    <li>foo</li>
    <li>bar</li>
    <li>baz</li>
</ul>

Answer 1

You can write like this:

li:first-child{
  margin-bottom:-5px;
  padding-bottom:30px;
  }

Check this http://cssdesk.com/QWbvc