[날마다 3분 CSS] 가상요소 선택자 ::before ::after

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

가상 요소는 css를 통해서 가상의 element를 추가하는 코드이다.

이미 작성된 HTML에 새로운 스타일을 주기 위해서 가상 요소를 추가해서 사용을 할 수 있다.

• 내용의 앞( ::before )과 뒤( ::after )에 콘텐츠를 추가한다
• content라는 속성이 없더라도 추가하고 봐야한다, 없으면 동작하지 않음
• 특정 요소의 앞(::before)이나 뒤(::after)에 지정한 내용(텍스트 또는 이미지)을 추가할 수 있다.
• 인라인 요소이다. ( = 넓이/높이 값이 지정되지 않는다 )

 

content 속성

• normal: 아무것도 표시하지 않는 기본값
• string: 문자열 생성
• image: 이미지나 비디오를 불러올 수 있으나 크기조절 불가능
• counter 순서를 매길 수 있음
• none: 아무것도 표시안함
• attr: 해당 속성의 속성값 표시

가상 요소는 css는 내가 처리할 요소 뒤에 :after, :before로 붙여서 만들 수 있다.

div:after {...} div:before {...}

 

💫실습

See the Pen Untitled by Zookeeper0 (@zookeeper0) on CodePen.