Introducing a special effect code that uses css3 and pseudo-elements to expand the underline to both sides when the mouse is moved in.-CSS Tutorial-php.cn

Introducing a special effect code that uses css3 and pseudo-elements to expand the underline to both sides when the mouse is moved in.

零下一度

Release： 2017-04-28 10:41:48

Original

1727 people have browsed it

This article mainly introduces the relevant information about using css3+ pseudo-elements to realize the effect of underlines expanding to both sides when the mouse is moved in. The article first introduces it in detail to facilitate everyone's understanding, and then gives 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>

Copy after login

css style

#underline{

    width: 200px;

    height: 50px;

    background: #ddd;

    margin: 20px;

    position: relative;

}

Copy after login

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秒完成*/

}

Copy after login

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%;

}

Copy after login

Optimization

1. Although the purpose is achieved, two pseudo elements are used, one Can extending 50% to the left, 50% to the right, and 100% only 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%;

}

Copy after login

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.

Full code







    

    鼠标移入下划线展开

    






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

Copy after login

The above is the detailed content of Introducing a special effect code that uses css3 and pseudo-elements 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!