Home > Article > Web Front-end > The code realizes the expansion effect of css mouse passing through both sides of the element's underline
The code realizes the expansion effect of css mouse passing through both sides of the element's underline
- 零到壹度Original
- 2018-04-04 11:09:561962browse
This article mainly introduces the code to implement the CSS mouse expansion effect on both sides of the element underline. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor and take a look
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标移入下划线展开</title>
<style type="text/css">
#underline{
width: 200px;
height: 50px;
background: #ddd;
margin: 20px;
position: relative;
}
#underline:after{
content: "";
width: 0;
height: 1px;
background: blue;
position: absolute;
top: 100%;
left: 50%;
transition: all .8s;
}
#underline:hover:after{
left: 0%;
width: 100%;
}
</style>
</head>
<body>
<p id="underline"></p>
</body>
</html>Related recommendations:
Use pseudo-elements and CSS3 to implement mouse movement The underline expands to both sides
The css navigation bar is selected to have the effect of moving the underline
Horizontal navigation bar + navigation bar follow + navigation bar underline sliding effect
The above is the detailed content of The code realizes the expansion effect of css mouse passing through both sides of the element's underline. For more information, please follow other related articles on the PHP Chinese website!