Cet article présente principalement le code pour implémenter l'effet d'expansion CSS lorsque la souris passe à travers le soulignement de l'élément des deux côtés. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner sous forme. une référence. Suivons l'éditeur pour y jeter un œil
<!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>Recommandations associées :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
