Incredible CSS navigation bar underline following effect

The first cutter in China github.com/chokcoco

First, here is a picture. How can we use pure CSS to create the following effect?

Before you continue reading, take a moment to pause. Try to think about the above effect or try it yourself, and see if you can achieve the above effect cleverly without the help of JS.

OK, continue. This effect is a similar small problem I encountered during the process of business development. In fact, even if I were asked to use Javascript, my first reaction would be that it would be very troublesome. So I've been wondering, is it possible to accomplish this effect using only CSS?

Defining requirements

Let's define a simple rule with the following requirements:

Assume the HTML structure is as follows:

<ul>
  <li>Amazing CSS</li>
  <li>Navigation bar</li>
  <li>The cursor small underline follows</li>
  <li>PURE CSS</li>
  <li>Nav Underline</li>
</ul>

• The width of the navigation bar's li is not fixed
• When moving from the left li to the right li of the navigation, the underline moves from left to right. Similarly, when moving from the right li of the navigation to the left li , the underline moves from right to left.

Realization requirements

When I first saw this effect, I felt that this following animation would be impossible to achieve with CSS alone.

If you want to achieve it only with CSS, you can only find another way and use some tricky methods.

OK, let's use some tricks and CSS to achieve this effect step by step. Analyze the difficulties:

Width is not fixed

The first difficulty is that the width of li is not fixed. Therefore, we may need to make some adjustments to the width of li element itself.

Since the width of each li is not fixed, the length of its corresponding underline must be adapted to itself. Naturally, we would think of using its border-bottom .

li {
    border-bottom: 2pxsolid#000;
}

So, it may look like this now (li are connected together, and the gaps between li are created using padding ):

Of course, there are no underscores at first, so we may need to hide them.

li {
    border-bottom: 0pxsolid#000;
}

Start over again with pseudo elements

This doesn't seem to work, because after hiding, when hovering li , an underline animation is required, and li itself certainly cannot be moved. So, we consider using pseudo-elements. Apply an underline to each li pseudo-element.

li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-bottom: 2pxsolid#000;
}

Let’s consider the first step of the animation. When hovering, the underline should move and expand from one side. Therefore, we use absolute positioning to set the width of li pseudo-element to 0. When hovering, the width changes from width: 0 -> width: 100% . The CSS is as follows:

li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    border-bottom: 2pxsolid#000;
}

li:hover::before {
    width: 100%;
}

The following results are obtained:

OK, I feel like I’m one step closer to success. Now we have to deal with the hardest problem:

How to make the line follow the movement of the cursor, so that when moving from the left li of the navigation to the right li , the underline moves from left to right. Similarly, when moving from the right li of the navigation to the left li , the underline moves from right to left.

Let's take a closer look at the current effect:

When switching from the first li to the second li , the direction of the first li underline retraction is incorrect. Therefore, we may need to shift the initial position of the underline and set it to left: 100% so that each time the underline is retracted, the first li will be correct:

li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 100%;
    border-bottom: 2pxsolid#000;
}

li:hover::before {
    left: 0;
    width: 100%;
}

See the effect:

Well, if you compare the two pictures carefully, the second effect is actually picking up sesame seeds and losing watermelons. The direction of the first li is correct, but the direction of the underline of the second li is wrong.

Therefore, we urgently need a method that can change the movement mode of the underline of the next li without changing the movement mode of the underline of the current hover li (so confusing).

That's right, here we can use the ~ selector to complete this difficult mission, which is also the most important part in this example.

For the currently hovered li , the positioning of the underline of the corresponding pseudo-element is left: 100% , while for li:hover ~ li::before , their positioning is left: 0 . The CSS code is as follows:

li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 100%;
    border-bottom: 2pxsolid#000;
    transition: 0.2salllinear;
}

li:hover::before {
    width: 100%;
    left: 0;
}

li:hover~li::before {
    left: 0;
}

At this point, the effect we want is achieved! Scatter flowers. have a look:

The effect is good, but a little stiff. We can achieve the effect mentioned above by changing the easing function appropriately and adding an animation delay . Of course, these are just icing on the cake.

The complete DEMO can be found here: CodePen --Demo

at last

The biggest flaw of this method is that when entering the first li, the line can only go from right to left. Apart from this, the following effect can be achieved very well.

I haven't updated for a long time. Recently, I have been obsessed with learning blockchain-related technologies, such as Ethereum programming, smart contract writing, etc. In the future, I will still focus more on my own field and write more front-end articles. The charm of CSS is still irresistible.

More wonderful CSS technical articles are collected in my Github -- iCSS. They are continuously updated. Welcome to click a star to subscribe and collect.

Summarize

The above is the incredible CSS navigation bar underline following effect that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!