이 글에서는 마우스가 양쪽 요소 밑줄을 통과할 때 CSS 확장 효과를 구현하는 코드를 주로 소개합니다. 편집자는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 에디터를 따라가며 함께 살펴볼까요
<!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>관련 추천:
의사 요소와 CSS3를 사용하여 마우스를 밑줄 안으로 이동하여 양쪽으로 확장하는 효과 얻기
가로 탐색 모음 + 탐색 모음 따르기 + 탐색 모음 밑줄 슬라이딩 효과
위 내용은 코드는 요소 밑줄의 양쪽을 통과하는 CSS 마우스의 확장 효과를 실현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
