Heim >Web-Frontend >CSS-Tutorial >Der Code implementiert den CSS-Erweiterungseffekt, wenn die Maus über beide Seiten der Unterstreichung des Elements fährt
Der Code implementiert den CSS-Erweiterungseffekt, wenn die Maus über beide Seiten der Unterstreichung des Elements fährt
- 零到壹度Original
- 2018-04-04 11:09:562046Durchsuche
In diesem Artikel wird hauptsächlich der Code zum Implementieren des CSS-Erweiterungseffekts vorgestellt, wenn die Maus auf beiden Seiten über die Elementunterstreichung fährt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und ihn als angeben eine Referenz. Folgen wir dem Editor, um einen Blick darauf zu werfen
<!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>Verwandte Empfehlungen:
Das obige ist der detaillierte Inhalt vonDer Code implementiert den CSS-Erweiterungseffekt, wenn die Maus über beide Seiten der Unterstreichung des Elements fährt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!