Pseudo Element

Pseudo class
요소가 특정 상태일 때 스타일 주는 선택자

.class-name:hover { } // 요소가 호버상태일 때 스타일 준다

Pseudo Element

요소의 일부분에 스타일 줄 때 사용하는 선택자

1. 문장 맨 첫글자, 첫 줄 스타일링 가능

.text::first-letter {
  color : red;
}

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

요소 내에 요소 추가 가능

.text::after {
  content : '추가할 내용';
  color : red;
}

.text::before {
  content : '추가할 내용';
  color : red;
}

📌 pseudo-element 사용하기

선택하려면 ::(콜론 2개) 를 사용한다.

📌 ::first-letter / ::first-line

::first-letter 안에 있는 글자 중 첫 글자만 스타일을 줌
::first-line 안에 있는 글자 중 첫 줄만 스타일을 줌

::after / ::before

::after 내부의 맨 마지막 부분에 특정 글자 등 추가 가능
::before 내부의 맨 앞 부분에 특정 글자 등 추가 가능

float 풀 때 사용하면 코드 깔끔해진다.

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

Pseudo Element도 개발자 도구에서 확인 가능하다
다른색상으로 :: 이름으로 표시된다.

3. 일부 요소는 스타일링도 가능. pseudo class도 줄 수 있음

파일 올리는 Input 등, 일부 요소는 pseudo element로 스타일 줄 수 있다.

.input-file::file-selector-button {
  border: none;
  background-color: skyblue;
}

pseudo class도 줄 수 있다.

.input-file::file-selector-button:hover {
  /* border: none; */
  background-color: blue;
}