How to slide line in css?

Question

https://i.sstatic.net/FpWdV.jpg (If you can't see the image) When I click on one heading the line should appear, but when I click on another heading I want the line to slide to the next heading.

I have already created the same menu navigator for each heading(page), and I just display line under the page that's open

Ex: Heading code

<p class="content">
    <a href="about.html" class="about">About Us</a>
    <a href="position.html" class="pos">Position</a>
    <a href="commerical.html" class="comm">Commerical Projects</a>
    <a href="residential.html" class="house">Residential Projects</a>
</p>

After setting all the same css, i have used hr in this way:

hr{
    position: absolute;
    top: 100px;
    right: 168px;
    width: 240px;
    border-color: red;
}

Answer 1

Here you go man try this :)

* {
  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;
  margin: 0;
  text-decoration: none;
  color: #333;
}

.two:hover ~ hr {
  margin-left: 25%;
}

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

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

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

<div class="container">
  <ul>
    <li class="one"><a href="#">About Us</a></li><!--
 --><li class="two"><a href="#">Position</a></li><!--
 --><li class="three"><a href="#">Commerical Projects</a></li><!--
 --><li class="four"><a href="#">Residential Projects</a></li>
    <hr />
  </ul>
</div>

Answer 2

You can use pseudo css classes to show underline for a active element(anchor tag). There are different states of pseudo classes like active, hover, focus etc

Most probably you can use focus class to solve your problem. (active and hover can also be used to handle different scenarios )

Here is an example to solve your problem

a {
    text-decoration: none;
}

a:focus {
    border-bottom: 1px solid red;
}

also instead of text-decoration: underline; you may use border-bottom: 1px solid red; which is more clear under line.

Here is full css code which may help you to better understand the solution :

/*To hide the default behaviour of <a> tag*/
a {
    text-decoration: none;
}

/***By using text-decoration: underline;***/
/* a:active, a:focus, a:hover {
    text-decoration: underline;
} */

/***To handle different cases***/
/* a:active, a:focus, a:hover {
    border-bottom: 1px solid red;
} */

/***Final solution - to handle your requirement***/
a:focus {
    border-bottom: 1px solid red;
}

You can also use the commented code by uncommenting it check different scenarios.

Answer 3

You can use something like this

$(document).ready(function() {
  var $slider = $('nav .slider'),
    width = $('nav ul li').width;
  $slider.width(width);
});
$(window).resize(function() {
  var $slider = $('nav .slider'),
    width = $('nav ul li').width,
    $isActive = $('nav ul li.isactive'),
    isX = $isActive.position().left,
    isW = $isActive.width();
  $slider.width(width);
  $('nav ul li').each(function() {
    var x = $(this).position().left,
      w = $(this).width();
    $(this).on({
      mouseenter: function() {
        $slider.css({
          left: x,
          width: w
        });
      },
      mouseleave: function() {
        $slider.css({
          left: isX,
          width: isW
        });
      }
    });
  });
}).resize();

*,
*:before,
*:after {
  box-sizing: border-box;
}

a {
  color: #ea3830;
  text-decoration: none;
}

nav {
  position: relative;
  width: 100%;
  max-width: 960px;
  min-width: 400px;
  height: 50px;
  margin: 25px auto;
  border-bottom: 3px solid #eee;
  text-align:center;
}

nav .slider {
  position: absolute;
  bottom: 0;
  width: 25%;
  height: 3px;
  box-shadow: 0 3px #ea3830;
  transition: all 0.3s ease-in-out;
}

nav ul {
  padding: 0;
  height: 50px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  align-items: center;
}

nav ul li {
  width: 25%;
  height: 50px;
  flex: 25%;
  line-height: 50px;
  list-style: none;
}

nav ul li a {
  padding: 0 25px;
  display: block;
  font-weight: 600;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <div class='slider'></div>
  <ul>
    <li class='isactive'>
      <a href='#'>Index</a>
    </li>
    <li>
      <a href='#'>About</a>
    </li>
    <li>
      <a href='#'>Work</a>
    </li>
    <li>
      <a href='#'>Contact</a>
    </li>
  </ul>
</nav>

Answer 4

You can check this link for details on how to build it: https://codepen.io/arjunamgain/pen/lGALt

This should be good enough to achieve the desired functionality. Instead of the red background in the css section just use a border rule, like:

border-bottom: 4px solid #d90000;

Answer 5

I'd recommend writing a css class with the desired style which you would apply to an

you will need some java-script to apply the class to the element when clicked but here's an example to get you started

https://www.w3schools.com/howto/howto_js_active_element.asp

Answer 6

p a {
  font-family: sans-serif;
  text-decoration: none;
  color: gray;
  position: relative;
  margin: 10px 0;
  display: inline-block;
  padding: 12px 10px;
}

p a::after {
  content: "";
  background: blue;
  height: 1px;
  position: absolute;
  bottom: 0;
  transition: .16s all 0.025s;
}

p a::after {
  left: 100%;
  right: 0;
}

p a:hover ~ a::after {
  left: 0;
  right: 100%;
}

p a:hover::after {
  left: 0;
  right: 0;
}

<p class="content">
    <a href="about.html" class="about">About Us</a>
    <a href="position.html" class="pos">Position</a>
    <a href="commerical.html" class="comm">Commerical Projects</a>
    <a href="residential.html" class="house">Residential Projects</a>
</p>

try this :)