자기소개 페이지 네비게이션 바에 :Hover, ::after 선택자 적용하기

자기소개 페이지를 만들 때 내용도 부실하고, 좀 밋밋한 느낌을 많이 받아서 고민하던 중

멋있어 보이는 CSS 기능이 있어서 적용했다.

어떤 것을 적용했는지, 무슨 개념인지 정리한 글이다.

 

:hover와 ::after 선택자를 적용한 결과물

 

:Hover?

• 객체에 마우스 커서를 가져다 놓으면 다른 스타일 값을 보여주고 싶을 때 사용하는 태그.

 

마우스 커서를 올리면 색상이 변한다

 

가상 요소(Pseudo-Element)?

• 일부 내용에 스타일을 적용할 때 사용한다.
• 가상 클래스와 구별하기 위해 클래스 이름 앞에 콜론 두 개(::)를 붙여 표시하고, 가상 요소 앞에 콜론 하나(:)를 붙여도 브라우저에서 가상 요소로 인식하지만 웹브라우저, explore에서는 인식이 안될 수 있다.
• CSS3부터는 가상 클래스는 :로(:hover, :active, 등), 가상 요소는::로(::after, ::before, 등) 구분한다.

가상 요소 선택자 ::after, ::before?

• 특정 요소의 앞(::before)이나 뒤(::after)에 새로운 컨텐츠(텍스트 또는 이미지)를 추가할 수 있다.
• ::before와 ::after와 함께 쓰이는 content는 html문서에 포함되는 않은 요소를 css에서 생성해 주는 가짜 속성이다.
• 내용의 앞과 뒤에 콘텐츠를 추가하고, 이 콘텐츠는 content=""라는 속성으로 정의한다. content=""가 있어야 가상 요소가 만들어지기 때문에 반드시 정의해야 된다.

HTML

CSS

출력화면

위와 같이 HTML 문서에는 문구를 작성하지 않았지만, CSS파일에서 가상 요소인 ::after와 ::before를 통해

화면에 글자를 작성한 것 같은 효과를 줄 수 있는 기능이다.

 

 

적용하기

.navbar a {
    display: flex;
    font-size: 22px;
    color: #fff;
    text-decoration: none;
    position: relative;
    padding: 8px 12px;

}

.navbar_menu a::after {
    content: "";               //가상요소가 만들어지기 위해 반드시 적어줘야함
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 4px;
    background-color: #fff;
    transition: all .5s ease-out;  //천천히 끝나는(ease-out) 0.5s의 애니메이션 효과처럼 적용된다
}

.navbar a:hover::after {
    width: 100%;  // 최종적으로는 width 100%가 되게 해줌
}

 

선택자 after와 before 는 앞, 뒤에 넣어주는선택자로 설명하였지만 X,Y 축 값 지정을 통해서 위,아래에 효과를 줄 수 있다. bottom 속성을 사용하지 않으면 영역의 제일 상단에 효과가 나타난다.

bottom 속성을 사용하지 않은 경우

Y축에 적용해보기

그렇다면 위에서 after, before에 대해 설명 한 것처럼 문자 위,아래가 아닌 좌, 우에 효과가 적용되려면 어떻게 코드를 바꿔야 될까?

 

Y축으로 효과 적용해보기

 

방법은 단순하다. X축과  Y축 설정을 바꿔주면 간단하게 적용이 된다.

a {
    padding-left: 20px;
    text-decoration: none;
    color: black;
}

.navbar a {
    display: flex;
    font-size: 22px;
    color: black;
    text-decoration: none;
    position: absolute;
    padding: 8px 12px;

}

.navbar_menu a::after {
    content: '';
    position: absolute; 
    color: #000;
    top: 50%;   // Y축 높이설정
    left: 100%; // X축 위치설정 0은 좌측 100은 우측
    transform: translateY(-50%); //X축이 아닌 Y축으로 좌우효과
    width: 4px; //너비 설정
    height: 0; //시작 폭 0으로 설정
    transition: all .5s ease-out;
}

.navbar a:hover::after {
    height: 100%; //최종 높이 100으로 설정
}

.navbar_menu li {
    padding: 16px 24px;
}

---

 

 

 

참고 글

네비게이션 바 호버 이펙트 만들기 #1

 

 

CSS 가상 요소 "::before"와 "::after" 완벽 정리