Fantastic css3-navigation bar underline follow effect

First look at the effect:

1, the basic effect is like this, the mouse hover, underline the entry. Mouse away, underline

2, the underline is the direction of the stroke, from the left to hover, the underline from left to right elongation. To be drawn from the right, the underline is left stretched again.

Implementation ideas

1, the navigation is composed by the Ul+li, here the obvious li width is not fixed. So, we may need to li fuss from the width of itself,

Since each width is not li necessarily, then it corresponds to the length of the underline, it must be to adapt to his own. So, we can use pseudo-elements when li hover . The underscore Acts li on each pseudo-element.

2, how to achieve a transition effect of animation? We can use relative positioning + to determine the positioning, when Li Hover, underline to move from one side of the motion.

So, we use absolute positioning, the li width of the pseudo element is set to 0, in hover, the width from width: 0 -> width: 100% , OK perfect

3, left left out, right move right out of the problem how to solve

How to make a line follow the movement of the cursor, implemented when moving from the left side of the navigation li to the right li , the underline moves from left to right. Similarly, when moving from the right side of the navigation li to the left li , the underscore moves from right to left

< Span class= "Apple-converted-space" > We urgently need a way to be able to not change the current hover   Li   the underline movement can change it next   Li   the way the underline moves (good wrapping).

Here we can use the ~ selector To accomplish this difficult mission, for the current hover li , its corresponding pseudo-element of the underline positioning is left: 100% , and for li:hover ~ li::before , They are positioned to left: 0 be

Example code: 1, Structure HTML section:

<ul>    <Li>Fantastic CSS</Li>    <Li>Navigation bar</Li>    <Li>Front</Li>    <Li>CSS3</Li>    <Li>Javascript</Li></ul>

2. CSS Section

ul{Display:Flex;position:Absolute;width:800px;Top:30%; Left:50%;Transform:Translate ( -50%, -50%); }Li{position:relative;padding:20px;font-size:24px;Color:#000;Line-height:1;transition:0.2s All Linear;cursor:Pointer;List-style:None; }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%;Top:0; Left:0;Transition-delay:0.1s;Border-bottom-color:#000;Z-index:-1; }li:hover ~ Li::before{ Left:0; }li:active{background:#000;Color:#fff; }

This is the charm of CSS3.

Fantastic css3-navigation bar underline follow effect