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>
#underline{ width: 200px; height: 50px; background: #ddd; margin: 20px; position: relative; }
#underline:before, #underline:after{ content: "";/*单引号双引号都可以,但必须是英文*/ width: 0; height: 3px; /*下划线高度*/ background: blue; /*下划线颜色*/ position: absolute; top: 100%; left: 50%; transition: all .8s ; /*css动画效果,0.8秒完成*/ }
#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%?
#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%; }
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!