Maison > Article > interface Web > Le code implémente l'effet d'expansion CSS lorsque la souris passe des deux côtés du soulignement de l'élément.
Le code implémente l'effet d'expansion CSS lorsque la souris passe des deux côtés du soulignement de l'élément.
- 零到壹度original
- 2018-04-04 11:09:562004parcourir
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!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Résumé des compétences d'utilisation du CSS dans les mini-programmes WeChatArticle suivant：Résumé des compétences d'utilisation du CSS dans les mini-programmes WeChat