Pseudo Element

Pseudo Class vs. Element

/* Pseudo-class */
.text:hover {
    color: red; 
}

/* Pseudo-element */
.text::first-letter {
    color: blue;
}

.text::first-line {
    color: blue;
}

.text::after {
    content: '';
    display: block;
    clear: both;
}

.text::before {
    content: 'Hi';
    color: blue;
}

• Pseudo class: 특정 요소가 다른 상태일 때 지정 스타일 적용해줌
• Pseudo element: 특정 html 요소의 안쪽 일부만 지정 스타일 적용해줌
  - Pseudo-element를 선택하려면 콜론 2개를 붙여준다
  - ::first-letter 는 안에 있는 글자 중 첫번째 글자만 스타일 적용
  - ::first-line 은 안에 있는 글자 중 첫 줄만 스타일 적용
  - ::after 는 내부의 맨 마지막 부분에 내용을 추가 + 스타일 적용
  - (참고) 위와 같이 clear block으로 활용할 수 있다
  - ::before 는 내부의 맨 첫 부분에 내용을 추가 + 스타일 적용