[HTML/CSS] CSS 가상 요소 선택자(Pseudo-Elements)

A::
가상 요소 선택자 { } 형태로 사용. 콜론 하나만 붙여도 동작은 하나 정확하게 웹표준은 아님

• before선택자
  요소 내부 앞에 내용(Content) 삽입. 삽입 된 내용은 “인라인 요소”로 만들어 진다. 삽입하는 내용을 반드시 명시해야 하기에 속성으로 content를 무조건 가지고 있어야 한다.
  
  
  
• after 선택자
  요소 내부 뒤에 내용(Content) 삽입. 마찬가지로 삽입 된 내용은 인라인 요소로 만들어 진다. 삽입하는 내용을 반드시 명시해야 하기에 속성으로 content를 무조건 가지고 있어야 한다.
  
  

ex) content가 없는 특정 크기의 box를 after 선택자를 이용해 넣으려면…

.box::after {

content: “”; // → content 없더라도 무조건 추가!

display:block; // → inline으로 추가되기에 width를 주려면 block으로 변경!

width:30px;

height:30px;
 
background-color:blue;

}

이 경우, 개발자 도구에서는 아래와 같이 표시된다.

<div class=”box”>

Hello!

::after  // -> 이런식으로 표시됨.

</div>