[CSS] 가상 요소 선택자

1. before

<div>
  Content
</div>

div::before {
  content: 'before!';
}

/* before! Content */

[ABC::before]

Inline 요소

선택자 ABC 요소 내부의 앞 부분에 내용을 삽입한다.

 

before 선택자를 사용할 경우, content 는 필수 속성이기 때문에

만약 내용이 비어있다 하더라도 content: "" 를 반드시 작성해야 한다.

 

2. after

div::after {
  content: 'after!';
}

/* Content after! */

div::after {
  content: 'after!';
  display: block; <!-- Block 요소로 변경 -->
  width: 30px; <!-- width, height 적용 -->
  height: 30px;
  background-color: pink;
}

[ABC::after]

Inline 요소

선택자 ABC 요소 내부의 뒷 부분에 내용을 삽입한다.

 

마찬가지로 after 선택자를 사용할 경우, content 는 필수 속성이기 때문에

만약 내용이 비어있다 하더라도 content: "" 를 반드시 작성해야 한다.