CSS underline is not moving on click

Question

I am trying to create sliding horizontal line on click of hyperlinks. Please have a look at: http://codepen.io/anon/pen/JdEPPb

The HTML is:

    * {
      box-sizing: border-box;
    }
    
    body {
      font: 300 100% 'Helvetica Neue', Helvetica, Arial;
    }
    
    .container {
      width: 50%;
      margin: 0 auto;
    }
    
    ul li {
      display: inline;
      text-align: center;
    }
    
    a {
      display: inline-block;
      width: 25%;
      padding: .75rem 0;
      text-decoration: none;
      color: #333;
    }
    
    .one:active ~ hr {
      margin-left: 0%;
    }
    .two:active ~ hr {
      margin-left: 25%;
    }
    
    .three:active ~ hr {
      margin-left: 50%;
    }
    
    .four:active ~ hr {
      margin-left: 75%;
    }
    
    hr {
      height: .25rem;
      width: 25%;
      margin: 0;
      background: tomato;
      border: none;
      transition: 0.3s ease-in-out;
    }

    <div class="container">
      <ul>
        <li class="one"><a href="#">Uno</a></li><!--
     --><li class="two"><a href="#">Dos</a></li><!--
     --><li class="three"><a href="#">Tres</a></li><!--
     --><li class="four"><a href="#">Quatro</a></li>
        <hr />
      </ul>
    </div>

There is no javascript code.

When I click Two, I want the underline to move under Two but currently its not moving. I need to hold for longer for it to move and when I release the mouse left button, it falls back to One

Answer 1

:active only fires while you hold down the mouse button on the element - i.e. while you are actively clicking on the element.

You can use :target instead of :active.

The :target pseudo selector in CSS matches when the hash in the URL and the id of an element are the same.

By giving values to the href attribute of the links and ids of the li elements we can :target the li that has been clicked on:

* {
  box-sizing: border-box;
}

body {
  font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}

.container {
  width: 50%;
  margin: 0 auto;
}

ul li {
  display: inline;
  text-align: center;
}

a {
  display: inline-block;
  width: 25%;
  padding: .75rem 0;
  text-decoration: none;
  color: #333;
}

#uno:target ~ hr {
  margin-left: 0%;
}
#dos:target ~ hr {
  margin-left: 25%;
}

#tres:target ~ hr {
  margin-left: 50%;
}

#quatro:target ~ hr {
  margin-left: 75%;
}

hr {
  height: .25rem;
  width: 25%;
  margin: 0;
  background: tomato;
  border: none;
  transition: 0.3s ease-in-out;
}

<div class="container">
  <ul>
    <li class="one" id="uno"><a href="#uno">Uno</a></li><!--
 --><li class="two" id="dos"><a href="#dos">Dos</a></li><!--
 --><li class="three" id="tres"><a href="#tres">Tres</a></li><!--
 --><li class="four" id="quatro"><a href="#quatro">Quatro</a></li>
    <hr />
  </ul>
</div>

Answer 2

It moves while your mouse is still down. Your problem is that :active selector is only activated while the element is active, typically when the mouse is pressed.

You need to add the class .active instead of the :active selector. So you'd have:

.one.active ~ hr {
  margin-left: 0%;
}
.two.active ~ hr {
  margin-left: 25%;
}

.three.active ~ hr {
  margin-left: 50%;
}

.four.active ~ hr {
  margin-left: 75%;
}

And add some functionality:

var elems = document.querySelectorAll(".one,.two,.three,.four");
for (var i = 0; i < elems.length; i++) {
  elems[i].addEventListener("click",function(e){
    if(document.querySelector(".active")){
      document.querySelector(".active").classList.remove("active");
    }
    e.currentTarget.classList.add("active");
  });
} 

A pen: http://codepen.io/vandervals/pen/wagwBQ