[CSS] hover했을 때 text가 위로 올라가는 네비게이션 만들기

 

See the Pen 1005_content attr by limhaneul2244 (@limhaneul2244) on CodePen.

 

---

위와 같이 만들기 위해서는 2가지 방법이 있는데, 우선 구조를 살펴보자.

<!--방법1 : 코드가 너무 많아 가독성이 떨어질 수 있다.-->
<a href="#none">
 <span>내용</span>
 <span>내용</span>
</a>

<!--방법2-->
<a href="#none" date-link="내용"></a>

방법1보다는 방법2가 가독성면에서도 간단하고 효율적이다.

 

방법1.

 

.gnb 안의 a태그는 inline이다. inline은 혼자 width와 height를 잡지 못하기 때문에 inline-block으로 잡아주고 w, h를 지정해준다.

a는 position: relative로 기준점을 잡아주고, a 안의 span은 position: absolute로 위치를 잡아준다.

 

각각의 span은 순차적으로 나열되게 보여야 하기 때문에 nth-childe를 이용해 top의 위치를 조정해준다.

---

방법2. 사용자 정의 속성을 통해 만들기

content에 text를 직접 적는것이 아니라 attr을 연결해 불러온다.

 

html코드에는 data-link로 각 nav에 들어갈 이름들이 연결되어 있다.

 

.type2 .gnb a:before,
.type2 .gnb a:after {position: absolute; width: 100%; content: attr(data-link);}

위와 같은 형태로 attribute를 불러오게 되면 before와 after에 속성(attribute)이 가져와진다.

absolute지정시 w를 갖지 못하므로 w값 지정 필수!!