마우스를 가져 가면 밑줄을 긋습니다.

Question

마우스를 올려 놓았을 때 링크 아래에 밑줄을 긋고 마우스를 올려 놓지 않으면 밑줄을 그어 볼 수 있습니다. 나는 잘 설명하고 있는지 잘 모르겠다. 이해가 안되는지 말해줘. <hr> 태그를 사용하여 실제 밑줄로이 작업을 수행 할 수 없다고 확신합니까? 어떤 도움을 주셔서 감사합니다!

Answer 1

a { 
    text-decoration: none; 
    display: inline-block; 
    border-bottom: 1px solid blue;  
    margin-right: 39px; 
    width: 0px; 
    -webkit-transition: 0.5s ease; 
      transition: 0.5s ease; 
} 

a:hover { 
    -webkit-transition: 0.5s ease; 
      transition: 0.5s ease; 
    border-bottom: 1px solid blue; 
    width: 30px; 
    margin-right: 9px; 
} 

여기에서 촬영 : Underline css3 transition

Answer 2

이것은 매우 간단한 CSS입니다 :

a { 
    text-decoration: none; 
} 

a:hover { 
    text-decoration: underline; 
} 

그러나 이것은 당신이 전환을 원하는 경우, 다음 위의 대답은 작동합니다, 단지 호버 효과입니다 .