Pseudo-element

HTML중 어떤 특정 부분만 스타일을 주려고 할 때 pseudo-element를 사용할 수 있다.

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

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

.text::after {
  content : '가나다';
  color : red;
}

.text::before {
  content : '가나다';
  color : red;
}

이처럼 클래스 앞에 ::을 사용하며 위와 같이 줄 수 있다.

- ::first-letter 은 안에 있는 글자에서 첫 글자만 스타일을 준다.

- ::first-line 은 안에 글자 중 첫 줄만 스타일을 준다.

- ::after 은 내부의 맨 마지막에 특정 글자를 추가한다.

- ::before 은 내부의 맨 처음에 특정 글자를 추가한다.

 

이걸 이용하면 float 사용 뒤 써주는 clear: both; 성질을 주는 div박스를 만들지 않고 사용가능하다.

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

float를 준 class에 box라는 클래스를 주게되면 글이 없는 block이 만들어져서 clear을 준 div와 같은 역할을 하게 된다.