HTML
<body>
<ul>
<li class="naver"><a href="">네이버</a></li>
<li class="daum"><a href="">다음</a></li>
<li class="google"><a href="">구글</a></li>
</ul>
</body>1. 3개 단어 가운데 정렬 + 여백 주기
CSS
-
가운데정렬
width:100; justify-content: center; 가로 너비 있어야 가운데 가지
height: 100vh; align-items: center ; 엄마 높이 있어야 애들이 가운데 가지 -
li 사이사이 여백주기 { margin: 0 2rem; }
<style>
*{ margin: 0; padding: 0; }
li{ list-style: none; }
ul{ display: flex;
width:100; justify-content: center; /* 가로 너비 있어야 가운데 가지 */
height: 100vh; align-items: center ; /* 엄마 높이 있어야 애들이 가운데 가지 */
font-size: 3rem; line-height: 2; }
/* li 간 여백주기 */
li{ margin: 0 2rem; position: relative; }
a{ text-decoration: none; }
.naver a{ color: green; }
.daum a{ color: yellow; }
.google a{ color: blue; }
</style>
2. li에 :hover하면 :after 밑줄이 생기는 애니메이션
밑줄이 가운데에서 시작해 양옆으로 가려면?
left: 0; right:0; width: 0; margin: auto;
bottom: 0;
height: 3px;
'좌우너비제로+양옆에 붙어있음' 사이 빈공간 마진이 밀어넣고, 트랜지션 시 auto 밀고나옴
<style>
li:after{
content: "";
display: block;
position: absolute;
/* '좌우너비제로+양옆에 붙어있음' 사이 빈공간 마진이 밀어넣고, 트랜지션 시 auto 밀고나옴 */
left: 0; right:0; width: 0; margin: auto;
bottom: 0;
height: 3px;
transition: 0.5s;
}
li:hover:after{ width: 100%; }
</style>
3. 글자마다 밑줄 색상 다르게
<style>
.naver:after{ background-color: green; }
.daum:after{ background-color: yellow; }
.google:after{ background-color: blue; }
</style>
4. 총코드
<style>
*{ margin: 0; padding: 0; }
li{ list-style: none; }
ul{ display: flex;
width:100; justify-content: center; /* 가로 너비 있어야 가운데 가지 */
height: 100vh; align-items: center ; /* 엄마 높이 있어야 애들이 가운데 가지 */
font-size: 3rem; line-height: 2; }
/* li 간 여백주기 */
li{ margin: 0 2rem; position: relative; }
a{ text-decoration: none; }
.naver a{ color: green; }
.daum a{ color: yellow; }
.google a{ color: blue; }
li:after{
content: "";
display: block;
position: absolute;
/* '좌우너비제로+양옆에 붙어있음' 사이 빈공간 마진이 밀어넣고, 트랜지션 시 auto 밀고나옴 */
left: 0; right:0; width: 0; margin: auto;
bottom: 0;
height: 3px;
transition: 0.5s;
}
li:hover:after{ width: 100%; }
.naver:after{ background-color: green; }
.daum:after{ background-color: yellow; }
.google:after{ background-color: blue; }
</style>