가상요소 (::before , ::after)

1.가상 요소와 가상 클래스

요소의 특정한 부분에 정해진 기능을 하도록 가상 요소 키워드 별로 미리 기능이 정의되어 있으며,

요소에 CSS 속성을 적용하는 것과 같은 방법으로 다양한 CSS 속성을 적용할 수 있다.

 

2. 가상요소 종류 

가상 요소	설명
::before	요소 내용 앞쪽에 새 컨텐츠를 추가.
::after	요소 내용 끝에 새 컨텐츠를 추가.
::selection	마우스 드래그로 선택한 텍스트 컨텐츠 영역을 선택.
::marker	목록 아이템 앞에 붙는 마커를 선택.
::first-letter	현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 컨텐츠 첫 글자를 선택.
::first-line	현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 컨텐츠 첫 줄 내용을 선택.

2. 적용 예시

이때, content란?

→ HTML 문서에 정보로 포함되지 않은 요소를 CSS에서 새롭게 생성시켜주는 가짜 속성

normal : 아무것도 표시하지 않는 기본값 string : 문자열 생성 image : 이미지, 비디오(크기 조절 불가) counte : 순서 none : 표시 X attr : 해당속성의 속성값 표시

 

nav > div li:before {
            content: '';
            width: 3px; height: 3px;
            background-color: #25a2d0;
            border-radius: 50%;
            position: absolute; left: 0; top: 6px;
        }
        .nav > div h3 {font-size: 18px; color: #25a2d0; font-weight: bold; margin-bottom: 4px;}
        .nav > div li a {position: relative;}
        .nav > div li a:after {
            content: '';
            display: inline-block;
            width: 0; height: 1px;
            background: #25aad0;
            transition: all .2s ease-out;
            position: absolute; bottom: 0; left: 0;
        }
        .nav > div li:hover a:after {width: 100%;}