• 2021-05-01

    List item span all the way


    Start a discussion

    Here we have a list. It's not as straight forward as it seems to make the active list item be selected all the way to the left,

    The trick is to use a pseudo element that spans all the way out.


    <div class="menu">
          <a href="#">Level 1</a>
            <li class="active">
              <a href="#">Level 2</a>
        <li><a href="#">Level 1</a></li>


    .menu {
      background: #eee;
      width: 200px;
      overflow: hidden;
    .menu > ul > li {
      padding: 0;
    .menu ul {
      list-style: none;
      margin: 0;
      padding: 0;
    .menu li {
      padding-left: 2rem;
      position: relative;
    .menu li.active:before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: -100vw;
      background: #000;
      z-index: 0;
    .menu li.active a {
      color: #fff;
    .menu a {
      display: block;
      position: relative;
      z-index: 1;
      padding: .5rem;