Incredible CSS navigation bar underline follow effect

How to use pure CSS to make the following effect?

图0:不可思议的css导航栏下划线跟随效果

<ul>
  <li>不可思议的CSS</li>
  <li>导航栏</li>
  <li>光标小下划线跟随</li>
  <li>PURE CSS</li>
  <li>Nav Underline</li>
</ul>

The width of the navigation column is not fixedWhen moving from left to right, the underline moves from left to right. Similarly, when moving from the right side of the navigation to the left side, the underline moves from right to left.Implementation requirements

At the first sight, I feel that it is impossible to follow the animation only by CSS.

If you want to use CSS only, you can only find another way and use some clever methods.

OK, now with the help of some tricks, use CSS to complete this effect step by step. Analyze the difficulties:

The width is not fixed

The first difficulty is that the width of Li is not fixed. Therefore, we may need to focus on the width of “Li”.

Since the width of each “Li” is not necessarily, the length of its corresponding underline must be adapted to itself. Naturally, we will think of using its border bottom.

li {
    border-bottom: 2px solid #000;
}

So, it may be like this now (Li are connected together, and the gap between Li is generated by “padding”):

图1:不可思议的css导航栏下划线跟随效果

li {
    border-bottom: 0px solid #000;
}

Overthrow and start over, with the help of pseudo elements

This doesn’t seem to work, because after hiding, when hover “Li”, you need to underline animation, and “Li” itself can’t move. So, we consider using pseudo elements. Apply an underline to the pseudo element of each {Li}.

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

Now consider the animation of the first step. When hovering, the underline should be expanded from one side. Therefore, we use absolute positioning to set the width of pseudo elements of ﹣ Li ﹣ to 0. In hover, 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: 2px solid #000;
}

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

The results are as follows

navunderline

OK, I feel a step closer to success. Now there’s one of the hardest questions left:

图3:不可思议的css导航栏下划线跟随效果

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

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

See the effect:

图4:不可思议的css导航栏下划线跟随效果

图5:不可思议的css导航栏下划线跟随效果

li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 100%;
    border-bottom: 2px solid #000;
    transition: 0.2s all linear;
}

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

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

So far, we want to achieve the effect of pull! Sprinkle flowers. Look:

图6:不可思议的css导航栏下划线跟随效果

Related Article
WordPress 3D rotating tag cloud

This 3D tag cloud is not the flash version of WP cumulus n years ago. This 3D rotating tag cloud Read more

Using wampserver tool to build local PHP + MySQL environment

No matter whether we use domestic space or foreign hosts, we prefer to go online after local debugging before setting Read more

How to install Linux system on Android phone

In our daily use of Android mobile phones, the installation of a complete Linux system will make mobile phones become Read more

How to backup your website data with Android phone

No matter what you do, backup is very necessary and important. Backup is just in case. Most of the time, Read more

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-spam image