Detailed explanation of CSS3 and pseudo-elements to enable the underline to expand to both sides when the mouse is moved in

This article mainly introduces the relevant information on using css3+ pseudo-elements to achieve the effect of underlines expanding to both sides when the mouse is moved in. The article first gives a detailed introduction to facilitate everyone's understanding, and then provides a complete example code for everyone to refer to and learn. Friends who need it, please come and study together. Hope it helps.

Let’s take a look at the renderings first:

Implementation ideas:

Combine pseudo elements: before and: After is positioned in the middle of the bottom of the element and sets the width from 0 to 100% to achieve the goal.

Implementation method:

1. First define a block element (inline elements have no width and height) and modify the style to a rectangle with a light gray background color, and set relative positioning.

html code

<p id="underline"></p>

css style

#underline{

    width: 200px;

    height: 50px;

    background: #ddd;

    margin: 20px;

    position: relative;

}

2. Set two pseudo elements: before and :after, and set them to have a background color of blue (that is, underline color), use absolute positioning to fix the two elements to the bottom middle position of #underline.

css style

#underline:before,

#underline:after{

    content: "";/*单引号双引号都可以，但必须是英文*/

    width: 0;

    height: 3px; /*下划线高度*/

    background: blue; /*下划线颜色*/

    position: absolute;

    top: 100%;

    left: 50%;

    transition: all .8s ; /*css动画效果，0.8秒完成*/

}

3. Set the mouse move-in effect.

css style

#underline:hover:before{/*动画效果是从中间向左延伸至50%的宽度*/

    left:0%; 

    width:50%;

}

#underline:hover:after{/*动画效果是从中间向右延伸至50%的宽度*/

    left: 50%; /*这句多余，主要是为了对照*/

    width: 50%;

}

Optimization

1. Although the purpose was achieved, two pseudo-elements were used, one extending 50% to the left and the other 50% to the right. , can only one extension to 100% achieve the goal?

css code

#underline:after{

    content: "";

    width: 0;

    height: 5px;

    background: blue;

    position: absolute;

    top: 100%;

    left: 50%;

    transition: all .8s;

}

#underline:hover:after{/*原理是left:50%变成0%的同时，宽度从0%变成100%*/

    left: 0%;

    width: 100%;

}

2. Only define the :after pseudo-element, and change it from 50% to the left with a width of 0 to 0% from the left with a width of 100%. It can be implemented, thereby achieving the purpose of streamlining the code, and adding :before to facilitate other operations.

Complete code

    

    

    






    <p id="underline"></p>

Related recommendations:

JavaScript implements the effect of moving the mouse in and out similar to Lagou.com

Pure JS code to achieve interlaced row color change, mouse move in and highlight

javascript table table interlaced color change plus mouse move in, move out and click effect_javascript skills

The above is the detailed content of Detailed explanation of CSS3 and pseudo-elements to enable the underline to expand to both sides when the mouse is moved in. For more information, please follow other related articles on the PHP Chinese website!