Example showing the effect of using css3 and pseudo-element to expand the underline 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 underlining expanding to both sides when the mouse is moved in. The article first introduces it in detail to facilitate everyone's understanding, and then provides a complete example code for everyone to refer to. Study, if you need it, come and study together.

Let’s take a look at the renderings first:

##Implementation idea:

Position the pseudo elements: before and :after to the middle of the bottom of the element, and set 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 background color of Light gray rectangle, set relative positioning.

html code

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

css style

#underline{

    width: 200px;

    height: 50px;

    background: #ddd;

    margin: 20px;

    position: relative;

}

2. Setting: before and: after Two pseudo elements, set their background color to blue (that is, the color of the underline), and 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 is achieved, But using two pseudo-elements, one extending 50% to the left and one extending 50% to the right, can the purpose be achieved by using only one extending to 100%?

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: after pseudo-element, and change it from 50% to the left with a width of 0. This can be achieved by changing the width from 0% to the left to 100%, thereby achieving the purpose of streamlining the code, and there is also an extra :before to facilitate other operations.

Full code

    

    

    





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

The above is the detailed content of Example showing the effect of using css3 and pseudo-element to expand the underline to both sides when the mouse is moved in. For more information, please follow other related articles on the PHP Chinese website!