[CSS] 텍스트 마우스 오버시 밑줄 애니메이션 효과

 

 

 

텍스트에 마우스를 올리면 밑줄이 그려지는 애니메이션 효과입니다.

 

• 메뉴1
• 메뉴2
• 메뉴3
• 메뉴4
• 메뉴5

 

 

 

1. CSS

 

.menu { width: 90%; margin: 0 auto; }
.menu li { position: relative; float: left; width: 20%; text-align: center; }
.menu li a { display: block; padding: 20px 0; font-size: 15px; color: #000;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu li a:hover { color: #0026dd; }
.menu li::after { content: ''; display: block; position: absolute; left: 50%; width: 0; border-bottom: 2px solid #0026dd; transition: all 1s; }
.menu li:hover::after { left: 0%; width: 100%; transition: all 1s; }

 

 

 

2. HTML

 

<ul class="menu">
    <li><a href="#">메뉴1</a></li>
    <li><a href="#">메뉴2</a></li>
    <li><a href="#">메뉴3</a></li>
    <li><a href="#">메뉴4</a></li>
    <li><a href="#">메뉴5</a></li>
</ul>