Detailed CSS3 and pseudo-elements to implement the mouse to move in the underline to both sides of the expansion

This article mainly introduces the use of css3+ pseudo-elements to achieve the mouse into the two sides of the line to expand the effect of the relevant data, the article first carried out a detailed introduction, easy to understand, and then gave a complete example code so that you can refer to the study, the need for friends below to learn to study it. Hope can help to big.

Let's take a look:

Implementation ideas:

The pseudo-elements: before and: After positioned to the middle of the bottom of the element, the set width changes from 0 to 100% to achieve the goal.

Implementation method:

1. First define a block element (the inline element is not wide) and modify the style to a background color of a light gray rectangle, set relative positioning.

HTML code

<p id= "Underline" ></p>

CSS Styles

#underline {    width:200px;    height:50px;    Background: #ddd;    margin:20px;    Position:relative;}

2, Settings: Before and: After two pseudo-elements, set it to the background color is blue (that is, the underline color), with absolute positioning, the two elements are fixed to the middle position of the #underline bottom.

CSS Styles

#underline: Before, #underline: after{    content: ""; * * Single quotation marks can be, but must be English */    width:0;    height:3px; /* Underline Height */    background:blue;/* Underline color */    Position:absolute;    top:100%;    left:50%;    Transition:all. 8s; /*css animation effect, completed in 0.8 seconds */}

3. Set mouse to move in effect.

CSS Styles

#underline: hover:before{/* animation effect is the width from the middle to the left to 50% */    left:0%;     width:50%;} #underline: hover:after{/* animation effect is the width from the middle to the right to 50% */    left:50%; * * This is superfluous, mainly to control */    width:50%;}

Optimization

1, although the purpose has been achieved, but with two pseudo-elements, a left extension 50%, a right extension of 50%, only one extension to 100% can achieve the purpose?

CSS Code

#underline: after{    content: "";    width:0;    height:5px;    Background:blue;    Position:absolute;    top:100%;    left:50%;    Transition:all. 8s;} #underline: The hover:after{/* principle is that left:50% becomes 0% while the width changes from 0% to 100%*/    left:0%;    width:100%;}

2, only defined: After the pseudo-element, the distance from the left 50% width 0 is changed to the left 0% width of 100% can be achieved, so as to achieve the purpose of simplifying the code, but also redundant: before convenient for other operations.

Full code

<! DOCTYPE html>