집 > 기사 > 웹 프론트엔드 > 코드는 요소 밑줄의 양쪽을 통과하는 CSS 마우스의 확장 효과를 실현합니다.

코드는 요소 밑줄의 양쪽을 통과하는 CSS 마우스의 확장 효과를 실현합니다.

零到壹度원래의: 2018-04-04 11:09:561999검색

이 글에서는 마우스가 양쪽 요소 밑줄을 통과할 때 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>

코드는 요소 밑줄의 양쪽을 통과하는 CSS 마우스의 확장 효과를 실현합니다.

관련 기사