가상요소 선택자 ::before, ::after 사용법

::before, ::after이 필요한 경우:

홈페이지의 헤더나 푸터에 구분선을 삽입하는 경우

가상클래스:

- 여러 태그 중에서 원하는 태그를 선택하기 위해 사용하는 선택자

- :hover / :active / :focus / :visited

 

가상요소:

- 내용의 일부만 선택해 스타일을 적용할 때 사용

- 가상 클래스와 구별하기 위해 클래스 이름 앞에 콜론 2개(::)을 붙여 표시

-> 가상 요소 앞에 콜론 하나를 붙여도 브라우저에서 가상요소로 인식하지만 웹브라우저, explore에서 인식이 안될 수 있음

- 가상 요소는 inline 요송이므로 특정 영역을 갖기 위해서는 display: block; 을 사용

- ::before, ::after

 

가상요소 선택자(가상클래스 선택자) ::before, ::after

- ::before: 특정요소의 앞에 지정한 내용(텍스트/ 이미지) 추가

- ::after: 특정요소의 뒤에 지정한 내용(텍스트/ 이미지) 추가

- 콘텐츠는 content=""라는 속성으로 정의

- 가상 요소는 인라인 요소

 

콘텐츠 추가(content="")

- html문서에 포함되지 않는 요소를 css에서 생성해주기 때문에 가짜 속성임

- content=""가 있어야지, 가상요소가 만들어지므로 필수 속성임

 

content 속성

- normal: 아무것도 표시하지 않은 기본값

- string: 문자열 생성

- image: 이미지나 비디오 불러올 수 있음, 크기조절 불가능

- counter: 순서를 매길 수 있음

- none: 아무것도 표시 안함

- attr: 해당 속성의 속성값 표시

 

::before를 이용하여 gnb 구분선 넣기

<ul>
  <li>로그인</li>
  <li>회원가입</li>
  <li>마이페이지</li>
  <li>사이트맵</li>
</ul>

 

li{
  list-style: none;
  float: left;
  padding: 0 15px;
}
li::after {
  content: "|";
  float: right;
  color: #ccc;
  margin-left: -17px;
}
li:last-child::after {
  content:"";
}

 

ul{
  display: flex;
}
li{
  position: relative;
}
li::before {
  content: "";
  display: block;
  width: 1px;
  height: 12px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
}
li:last-child::before {
  display: none;
}